<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/Frog_16px_1177822_easyicon.net.ico">
  <link rel="mask-icon" href="/images/Frog_32px_1177822_easyicon.net.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"hxy1997.xyz","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":true,"nav":null,"activeClass":"valine"},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"输入关键字","hits_empty":"没有找到与「${query}」相关搜索","hits_stats":"${hits} 条相关记录，共耗时 ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，输入输出考验了对js语法的掌握程度，值得多次学习。虽然有的实际使用中不会碰到，但至少可以养成遇到问题查文档的好习惯。">
<meta property="og:type" content="article">
<meta property="og:title" content="bigfrontend的输入输出题目讨论">
<meta property="og:url" content="https://hxy1997.xyz/2021/06/17/bigfrontend%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/index.html">
<meta property="og:site_name" content="hxy的博客">
<meta property="og:description" content="国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，输入输出考验了对js语法的掌握程度，值得多次学习。虽然有的实际使用中不会碰到，但至少可以养成遇到问题查文档的好习惯。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-06-17T13:07:33.000Z">
<meta property="article:modified_time" content="2022-09-28T01:24:27.833Z">
<meta property="article:author" content="hxy">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="bigfrontend">
<meta property="article:tag" content="题库">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://hxy1997.xyz/2021/06/17/bigfrontend%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>bigfrontend的输入输出题目讨论 | hxy的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="hxy的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">hxy的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Mia san Mia!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/huxingyi1997" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hxy1997.xyz/2021/06/17/bigfrontend%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/Robben.gif">
      <meta itemprop="name" content="hxy">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="hxy的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          bigfrontend的输入输出题目讨论
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-06-17 21:07:33" itemprop="dateCreated datePublished" datetime="2021-06-17T21:07:33+08:00">2021-06-17</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-09-28 09:24:27" itemprop="dateModified" datetime="2022-09-28T09:24:27+08:00">2022-09-28</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/web%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">web前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="热度" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">热度：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/06/17/bigfrontend%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/06/17/bigfrontend%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%A2%98%E7%9B%AE%E8%AE%A8%E8%AE%BA/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>国外前端会考察哪些问题？js函数、系统设计、TS类型体操的用法，大大拓宽了我的眼界，去思考和实战更加相关的问题吧，输入输出考验了对js语法的掌握程度，值得多次学习。虽然有的实际使用中不会碰到，但至少可以养成遇到问题查文档的好习惯。</p>
<span id="more"></span>

<h1 id="输入输出"><a href="#输入输出" class="headerlink" title="输入输出"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz">输入输出</a></h1><p>该部分综合考察对js的熟悉程度</p>
<h2 id="1-Promise-order"><a href="#1-Promise-order" class="headerlink" title="1. Promise order"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/1-promise-order">1. Promise order</a></h2><h3 id="题目"><a href="#题目" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">  resolve()</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line"></span><br><span class="line">promise.then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line">&#125;).then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">7</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">8</span>)</span><br><span class="line">&#125;, <span class="number">10</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">9</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案"><a href="#答案" class="headerlink" title="答案"></a>答案</h3><p>实践循环宏任务微任务</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">7</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">9</span><br><span class="line">8</span><br></pre></td></tr></table></figure>

<h3 id="详细解析"><a href="#详细解析" class="headerlink" title="详细解析"></a>详细解析</h3><h4 id="Part-1-Sync-Code"><a href="#Part-1-Sync-Code" class="headerlink" title="Part 1 - Sync Code"></a>Part 1 - Sync Code</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>) <span class="comment">// sync JS</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// promise run constructor function</span></span><br><span class="line"><span class="comment">// because here resolve is NOT async, then still in sequence to run</span></span><br><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>) </span><br><span class="line">  resolve() <span class="comment">// only mark the promise&#x27;s internal state to be &quot;Fulfilled&quot;</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>) <span class="comment">// still run to the end of this callback function</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">4</span>) <span class="comment">// continue to run sequentially</span></span><br></pre></td></tr></table></figure>

<p>Until now the result output is <strong>Sequential &amp; Sync</strong>:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span></span><br><span class="line"><span class="number">2</span></span><br><span class="line"><span class="number">3</span></span><br><span class="line"><span class="number">4</span></span><br></pre></td></tr></table></figure>

<h4 id="Part-2-Async-amp-Sync"><a href="#Part-2-Async-amp-Sync" class="headerlink" title="Part 2 - Async &amp; Sync"></a>Part 2 - Async &amp; Sync</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Async: Job Queue for promise</span></span><br><span class="line">promise.then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">5</span>) </span><br><span class="line">&#125;).then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>) </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Sync: should be run immediately compared to ASYNC</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">7</span>) </span><br><span class="line"></span><br><span class="line"><span class="comment">// Async: event loop &amp; callback queue for Web API</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">8</span>) </span><br><span class="line">&#125;, <span class="number">10</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Async: event loop &amp; callback queue for Web API</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">9</span>) </span><br><span class="line">&#125;, <span class="number">0</span>) <span class="comment">// even though time is 0, still an ASYNC Call</span></span><br></pre></td></tr></table></figure>

<p>For the 2nd part, it has both <strong>Sync &amp; Async</strong>, then the priority and order becomes:</p>
<ul>
<li>1st: Sync code</li>
<li>2nd: Async for Job Queue -&gt; process promise</li>
<li>3rd: Async for Callback Queue -&gt; process Web API call</li>
</ul>
<p>Output for second part should be:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">7</span> <span class="comment">// sync code</span></span><br><span class="line"><span class="number">5</span> <span class="comment">// job queue</span></span><br><span class="line"><span class="number">6</span> <span class="comment">// job queue</span></span><br><span class="line"><span class="number">9</span> <span class="comment">// callback queue 0s</span></span><br><span class="line"><span class="number">8</span> <span class="comment">// callback queue 10s</span></span><br></pre></td></tr></table></figure>



<h2 id="2-Promise-executor"><a href="#2-Promise-executor" class="headerlink" title="2. Promise executor"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/2-promise-executor">2. Promise executor</a></h2><h3 id="题目-1"><a href="#题目-1" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  resolve(<span class="number">1</span>)</span><br><span class="line">  resolve(<span class="number">2</span>)</span><br><span class="line">  reject(<span class="string">&#x27;error&#x27;</span>)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value)</span><br><span class="line">&#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;error&#x27;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="答案-1"><a href="#答案-1" class="headerlink" title="答案"></a>答案</h3><p>Promise链式调用返回的值和值的穿透</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">1</span><br></pre></td></tr></table></figure>



<h2 id="3-Promise-then-callbacks"><a href="#3-Promise-then-callbacks" class="headerlink" title="3. Promise then callbacks"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/3-promise-then-callbacks">3. Promise then callbacks</a></h2><h3 id="题目-2"><a href="#题目-2" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">.then(<span class="function">() =&gt;</span> <span class="number">2</span>)</span><br><span class="line">.then(<span class="number">3</span>)</span><br><span class="line">.then(<span class="function">(<span class="params">value</span>) =&gt;</span> value * <span class="number">3</span>)</span><br><span class="line">.then(<span class="built_in">Promise</span>.resolve(<span class="number">4</span>))</span><br><span class="line">.then(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>

<h3 id="答案-2"><a href="#答案-2" class="headerlink" title="答案"></a>答案</h3><p>Promise链式调用返回的值和值的穿透</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">6</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-1"><a href="#详细解析-1" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">  .then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// &gt; 1</span></span><br></pre></td></tr></table></figure>

<p>Is the same as</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> resolve(<span class="number">1</span>))</span><br><span class="line">  .then(<span class="function">(<span class="params">val</span>) =&gt;</span> <span class="built_in">console</span>.log(val))</span><br><span class="line"><span class="comment">// &gt; 1</span></span><br></pre></td></tr></table></figure>

<p>Therefore,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.then(<span class="function">() =&gt;</span> <span class="number">2</span>)</span><br><span class="line">  .then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// &gt; 2</span></span><br></pre></td></tr></table></figure>

<p>But don’t forget that if you don’t use the new value you are chaining, it won’t be used, e.g.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">  .then(<span class="function">() =&gt;</span> <span class="number">2</span>)</span><br><span class="line">  .then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// &gt; 2 # as 1 isn&#x27;t passed in the first &#x27;then&#x27;, e.g. .then(num =&gt; num + 2)</span></span><br></pre></td></tr></table></figure>

<p>And you can’t have numbers in .then calls, they need to be functions, ts throws this error, therefore that goes onto the reject pile and we skip over it</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">  .then(<span class="number">3</span>) <span class="comment">// Argument of type &#x27;3&#x27; is not assignable to parameter of type &#x27;(value: number) =&gt; number | PromiseLike&lt;number&gt;&#x27;.ts(2345)</span></span><br><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>).then(<span class="built_in">Promise</span>.resolve(<span class="number">4</span>)).then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// &gt; 1</span></span><br><span class="line">then(<span class="built_in">Promise</span>.resolve(<span class="number">4</span>))</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then</a></p>
<blockquote>
<p>returns another pending promise object, the resolution/rejection of the promise returned by then will be subsequent to the resolution/rejection of the promise returned by the handler. Also, the resolved value of the promise returned by then will be the same as the resolved value of the promise returned by the handler.</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>) <span class="comment">// 1</span></span><br><span class="line">.then(<span class="function">() =&gt;</span> <span class="number">2</span>) <span class="comment">// 2 (as 1 isn&#x27;t used)</span></span><br><span class="line">.then(<span class="number">3</span>) <span class="comment">// skip</span></span><br><span class="line">.then(<span class="function">(<span class="params">value</span>) =&gt;</span> value * <span class="number">3</span>) <span class="comment">// 2 * 3 == 6</span></span><br><span class="line">.then(<span class="built_in">Promise</span>.resolve(<span class="number">4</span>)) <span class="comment">// creates a Pending promise</span></span><br><span class="line">.then(<span class="built_in">console</span>.log) <span class="comment">// funnels 6 into console.log</span></span><br></pre></td></tr></table></figure>



<h2 id="4-Promise-then-callbacks-II"><a href="#4-Promise-then-callbacks-II" class="headerlink" title="4. Promise then callbacks II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/4-Promise-then-callbacks-II">4. Promise then callbacks II</a></h2><h3 id="题目-3"><a href="#题目-3" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">.then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">  <span class="keyword">return</span> val + <span class="number">1</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="number">3</span>)</span><br><span class="line">    .then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(val)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="number">4</span>)</span><br><span class="line">&#125;).catch(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">&#125;).finally(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">  <span class="keyword">return</span> <span class="number">10</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="答案-3"><a href="#答案-3" class="headerlink" title="答案"></a>答案</h3><p>Promise链式调用返回的值和值的穿透</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">undefined</span><br><span class="line">3</span><br><span class="line">undefined</span><br><span class="line">4</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-2"><a href="#详细解析-2" class="headerlink" title="详细解析"></a>详细解析</h3><p>I was told that in other classical languages eg: C++, or java, the template order of these 3 keyword is impressive in my memory:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span>&#123;&#125;</span><br><span class="line"><span class="keyword">catch</span>&#123;&#125;</span><br><span class="line"><span class="keyword">finally</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>But let’s <strong>think in JavaScript</strong> .</p>
<h4 id="1-finally-never-receive-an-argument"><a href="#1-finally-never-receive-an-argument" class="headerlink" title="1. finally() never receive an argument"></a>1. finally() never receive an argument</h4><p>docs: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally</a></p>
<h4 id="2-Normal-return-value-in-finally-won’t-make-effect-on-promise-object"><a href="#2-Normal-return-value-in-finally-won’t-make-effect-on-promise-object" class="headerlink" title="2. Normal return value in finally won’t make effect on promise object"></a>2. Normal return value in finally won’t make effect on promise object</h4><h4 id="3-throw-Error-in-finally"><a href="#3-throw-Error-in-finally" class="headerlink" title="3. throw Error in finally()"></a>3. throw Error in finally()</h4><p>Note: A throw (or returning a rejected promise) in the finally callback will reject the new promise with the rejection reason specified when calling throw.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.reject(<span class="number">1</span>)</span><br><span class="line">.finally(<span class="function">() =&gt;</span> &#123;                                                                                                                 </span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span>  <span class="built_in">Error</span>(<span class="number">2</span>); </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// or </span></span><br><span class="line"><span class="built_in">Promise</span>.reject(<span class="number">1</span>)</span><br><span class="line">.finally(<span class="function">() =&gt;</span> &#123;                                                                                                                          </span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="number">2</span>); </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>The return promise object rejected value will be affected with <strong>2</strong>.</p>
<h4 id="4-Order-of-then-amp-catch"><a href="#4-Order-of-then-amp-catch" class="headerlink" title="4. Order of then() &amp; catch()"></a>4. Order of then() &amp; catch()</h4><p>Remember <code>then()</code> &amp; <code>catch()</code> can be called to handle the promise at any time and at any order. It will use the latest final state of the promise object, and affects the new value of the promise object.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.reject(<span class="number">1</span>)</span><br><span class="line">.catch(<span class="function">(<span class="params">val</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val); <span class="comment">// 1 : rejected value is 1 </span></span><br><span class="line">    <span class="comment">// return nothing</span></span><br><span class="line">    <span class="comment">// will return undefined for promise object</span></span><br><span class="line">&#125;)</span><br><span class="line">.then(<span class="function">(<span class="params">val</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val); <span class="comment">// undefine: current promise object is already handled by &quot;catch()&quot;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="5-Full-solution-of-original-problem"><a href="#5-Full-solution-of-original-problem" class="headerlink" title="5. Full solution of original problem"></a>5. Full solution of original problem</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">.then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val) <span class="comment">// resolve with value 1</span></span><br><span class="line">  <span class="keyword">return</span> val + <span class="number">1</span>  <span class="comment">//  return 2  </span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val) <span class="comment">// 2</span></span><br><span class="line">  <span class="comment">// return undefined</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)  <span class="comment">// undefined   </span></span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="number">3</span>)</span><br><span class="line">    .then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(val) <span class="comment">// 3</span></span><br><span class="line">      <span class="comment">// return undefined</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)  <span class="comment">// undefined </span></span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="number">4</span>)  <span class="comment">// return 4    </span></span><br><span class="line">&#125;).catch(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)  <span class="comment">// 4</span></span><br><span class="line">  <span class="comment">// return undefined</span></span><br><span class="line">&#125;).finally(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)  <span class="comment">// undefined: finally has no arguments</span></span><br><span class="line">  <span class="keyword">return</span> <span class="number">10</span>   <span class="comment">// no effect on promise object</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val)  <span class="comment">// undefined: because last &#x27;catch()&#x27; handled the promise object with &#x27;undefined&#x27;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="Final-Output"><a href="#Final-Output" class="headerlink" title="Final Output:"></a>Final Output:</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span></span><br><span class="line"><span class="number">2</span></span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line"><span class="number">3</span></span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line"><span class="number">4</span></span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line"><span class="literal">undefined</span></span><br></pre></td></tr></table></figure>



<h2 id="5-block-scope"><a href="#5-block-scope" class="headerlink" title="5. block scope"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/block-scope-1">5. block scope</a></h2><h3 id="题目-4"><a href="#题目-4" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(i), <span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(i), <span class="number">0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="答案-4"><a href="#答案-4" class="headerlink" title="答案"></a>答案</h3><p>考的是对于声明变量和作用域的理解</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">5</span><br><span class="line">5</span><br><span class="line">5</span><br><span class="line">5</span><br><span class="line">5</span><br><span class="line">0</span><br><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-3"><a href="#详细解析-3" class="headerlink" title="详细解析"></a>详细解析</h3><p>Using let means program work as you expect. e.g. this below snippet prints</p>
<p>0 1 2 3 4</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(i), <span class="number">0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>However, with</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(i), <span class="number">0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>If we use var, then var gets hoisted outside of the block scope into the outer function scope, as var makes it function scoped instead of block scoped.</p>
<p>And, if we have any closures created in the loop, let variables will be bound to the value from only that iteration of the loop, whereas var variables will be the current value of the variable, which at that point of the settimeout it is 5, hence it prints.</p>
<p>5 5 5 5 5</p>
<h2 id="6-Arrow-Function"><a href="#6-Arrow-Function" class="headerlink" title="6. Arrow Function"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/6-Arrow-Function">6. Arrow Function</a></h2><h3 id="题目-5"><a href="#题目-5" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line">  a: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">b</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">  c: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">  d: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">    &#125;)()</span><br><span class="line">  &#125;,</span><br><span class="line">  e: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.b()</span><br><span class="line">  &#125;,</span><br><span class="line">  f: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.b</span><br><span class="line">  &#125;,</span><br><span class="line">  g: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.c()</span><br><span class="line">  &#125;,</span><br><span class="line">  h: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.c</span><br><span class="line">  &#125;,</span><br><span class="line">  i: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.a())</span><br><span class="line"><span class="built_in">console</span>.log(obj.b())</span><br><span class="line"><span class="built_in">console</span>.log(obj.c())</span><br><span class="line"><span class="built_in">console</span>.log(obj.d())</span><br><span class="line"><span class="built_in">console</span>.log(obj.e())</span><br><span class="line"><span class="built_in">console</span>.log(obj.f()())</span><br><span class="line"><span class="built_in">console</span>.log(obj.g())</span><br><span class="line"><span class="built_in">console</span>.log(obj.h()())</span><br><span class="line"><span class="built_in">console</span>.log(obj.i()())</span><br></pre></td></tr></table></figure>

<h3 id="答案-5"><a href="#答案-5" class="headerlink" title="答案"></a>答案</h3><p>考察this指向，主要是箭头函数和字面量函数</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;bfe&quot;</span></span><br><span class="line"><span class="string">&quot;bfe&quot;</span></span><br><span class="line">undefined</span><br><span class="line"><span class="string">&quot;bfe&quot;</span></span><br><span class="line"><span class="string">&quot;bfe&quot;</span></span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line"><span class="string">&quot;bfe&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-4"><a href="#详细解析-4" class="headerlink" title="详细解析"></a>详细解析</h3><p>Equivalent</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line">  a: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">b</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.a()) <span class="comment">// bfe</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.b()) <span class="comment">// bfe</span></span><br></pre></td></tr></table></figure>

<p>Arrow function ‘this’</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line">  c: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// When we use arrow functions as object properties</span></span><br><span class="line">    <span class="comment">// it creates a new context, so console.log(this) is</span></span><br><span class="line">    <span class="comment">// everything in this arrow function, dev isn&#x27;t there</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.c()) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<p>IFFE and arrow functions</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line">  d: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// although this is an arrow function</span></span><br><span class="line">    <span class="comment">// it&#x27;s an IIFE, so when parsed it turns into this</span></span><br><span class="line">    <span class="comment">// return this.dev</span></span><br><span class="line">    <span class="keyword">return</span> (<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">    &#125;)()</span><br><span class="line">  &#125;,</span><br><span class="line">  e: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// b or e don&#x27;t have arrow functions</span></span><br><span class="line">    <span class="comment">// so they can still access dev in the</span></span><br><span class="line">    <span class="comment">// context of this</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.b()</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.d()) <span class="comment">// bfe</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.e()) <span class="comment">// bfe</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">b</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.dev</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  f: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// When we pass a reference to the b function</span></span><br><span class="line">    <span class="comment">// we loose the this context as the callee is outside the obj</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.b</span><br><span class="line">  &#125;,</span><br><span class="line">  g: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// we already know c is trapped</span></span><br><span class="line">    <span class="comment">// in an arrow function context</span></span><br><span class="line">    <span class="comment">// so it&#x27;s always gonna be undefined</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.c()</span><br><span class="line">  &#125;,</span><br><span class="line">  h: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// we already know c is trapped</span></span><br><span class="line">    <span class="comment">// in an arrow function context</span></span><br><span class="line">    <span class="comment">// so it&#x27;s always gonna be undefined</span></span><br><span class="line">    <span class="comment">// even when using obj.h()()</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.c</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.f()()) <span class="comment">// undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.g()) <span class="comment">// undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.h()()) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<p>Finally nested arrow functions</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  dev: <span class="string">&#x27;bfe&#x27;</span>,</span><br><span class="line">  i: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.dev <span class="comment">// as this was created inside the function</span></span><br><span class="line">      <span class="comment">// it assumes the objects this </span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.i()()) <span class="comment">// bfe</span></span><br></pre></td></tr></table></figure>



<h2 id="7-Increment-Operator"><a href="#7-Increment-Operator" class="headerlink" title="7. Increment Operator"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Increment-Operator">7. Increment Operator</a></h2><h3 id="题目-6"><a href="#题目-6" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="keyword">const</span> b = ++a</span><br><span class="line"><span class="keyword">const</span> c = a++</span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br><span class="line"><span class="built_in">console</span>.log(c)</span><br></pre></td></tr></table></figure>

<h3 id="答案-6"><a href="#答案-6" class="headerlink" title="答案"></a>答案</h3><p>考察++的执行顺序，输出</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">3</span><br><span class="line">2</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-5"><a href="#详细解析-5" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> b = ++a; <span class="comment">// it will increment and return the value *after* incrementing</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// a&#x27;s value will also get updated (allowed because of the &#x27;let&#x27;)</span></span><br><span class="line"><span class="keyword">const</span> c = a++; <span class="comment">// this will increment as well, but it will return the value *before* </span></span><br><span class="line"> incrementing.</span><br><span class="line"><span class="comment">// a&#x27;s value will also get updated</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 3</span></span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">console</span>.log(c); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>



<h2 id="8-Implicit-Coercion-I"><a href="#8-Implicit-Coercion-I" class="headerlink" title="8. Implicit Coercion I"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Implicit-Conversion-1">8. Implicit Coercion I</a></h2><h3 id="题目-7"><a href="#题目-7" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;false&#x27;</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">false</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> - <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> - <span class="string">&#x27; 02 &#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> * <span class="string">&#x27; 02 &#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;1&#x27;</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;number&#x27;</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="literal">null</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="literal">false</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-7"><a href="#答案-7" class="headerlink" title="答案"></a>答案</h3><p>类型转换和隐式转换</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="string">&quot;31&quot;</span></span><br><span class="line">2</span><br><span class="line">1</span><br><span class="line">6</span><br><span class="line">1</span><br><span class="line">NaN</span><br><span class="line">0</span><br><span class="line">0</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-6"><a href="#详细解析-6" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;false&#x27;</span>)) <span class="comment">// ONLY empty string will be false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">false</span>)) <span class="comment">// if it&#x27;s already boolean type, NO conversion</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> + <span class="number">1</span>) <span class="comment">// either of part is string, whole expression will be string concatenation </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> - <span class="number">1</span>) <span class="comment">// subtraction operator ONLY trigger ToNumber() conversion, no string</span></span><br><span class="line"><span class="comment">// same as (3-1) = 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> - <span class="string">&#x27; 02 &#x27;</span>) <span class="comment">// String to Number will trim all white spaces and starting 0</span></span><br><span class="line"><span class="comment">// same as (3 - 2) = 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span> * <span class="string">&#x27; 02 &#x27;</span>) <span class="comment">// multiplicative operator ONLY trigger ToNumber() conversion</span></span><br><span class="line"><span class="comment">// same as (3 * 2) = 6</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;1&#x27;</span>)) <span class="comment">// String to Number, here is the valid number 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;number&#x27;</span>)) <span class="comment">// String to Number, here NOT Valid, return NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="literal">null</span>)) <span class="comment">// by ECMA spec, it&#x27;s 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="literal">false</span>)) <span class="comment">// by ECMA spec, it&#x27;s 0</span></span><br></pre></td></tr></table></figure>

<p>Final solution:</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">true</span><br><span class="line">false</span><br><span class="line">&quot;31&quot;</span><br><span class="line">2</span><br><span class="line">1</span><br><span class="line">6</span><br><span class="line">1</span><br><span class="line">NaN</span><br><span class="line">0</span><br><span class="line">0</span><br></pre></td></tr></table></figure>



<h2 id="9-null-and-undefined"><a href="#9-null-and-undefined" class="headerlink" title="9. null and undefined"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/null-and-undefined">9. null and undefined</a></h2><h3 id="题目-8"><a href="#题目-8" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="number">1</span>,<span class="number">2</span>,<span class="literal">null</span>,<span class="number">3</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="number">1</span>,<span class="number">2</span>,<span class="literal">undefined</span>,<span class="number">3</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> === <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &lt; <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &gt; <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &lt;= <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &gt;= <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> == <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &lt; <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &gt; <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &lt;= <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &gt;= <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-8"><a href="#答案-8" class="headerlink" title="答案"></a>答案</h3><p>一定要注意<code>null == 0</code>是错误的，只和null或undefined相等，undefined转为数会变为<code>NaN</code></p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;[1,2,null,3]&quot;</span></span><br><span class="line"><span class="string">&quot;[1,2,null,3]&quot;</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-7"><a href="#详细解析-7" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="number">1</span>,<span class="number">2</span>,<span class="literal">null</span>,<span class="number">3</span>]))  <span class="comment">// happy path: &quot;[1,2,null,3]&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="number">1</span>,<span class="number">2</span>,<span class="literal">undefined</span>,<span class="number">3</span>]))  <span class="comment">// JSON doesn&#x27;t have undefined value, it&#x27;s replaced with null in JSON data type.</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> === <span class="literal">undefined</span>) <span class="comment">// null -&gt; 0 and undefined -&gt; NaN, then NOT strictly equal</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">undefined</span>) <span class="comment">// Special rule: true -&gt; Just Remember it</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="number">0</span>) <span class="comment">// Special rule: null is not converted to 0 here</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &lt; <span class="number">0</span>) <span class="comment">// false: null -&gt; 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &gt; <span class="number">0</span>) <span class="comment">// false: null -&gt; 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &lt;= <span class="number">0</span>) <span class="comment">// true: null -&gt; 0 </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> &gt;= <span class="number">0</span>) <span class="comment">// true: null -&gt; 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> == <span class="number">0</span>)  <span class="comment">// false: undefined -&gt; NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &lt; <span class="number">0</span>)  <span class="comment">// false: undefined -&gt; NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &gt; <span class="number">0</span>)  <span class="comment">// false: undefined -&gt; NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &lt;= <span class="number">0</span>)  <span class="comment">// false: undefined -&gt; NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> &gt;= <span class="number">0</span>)  <span class="comment">// false: undefined -&gt; NaN</span></span><br></pre></td></tr></table></figure>

<p><strong>Notes:</strong></p>
<ol>
<li>When converting to Number, null and undefined are handled differently: null becomes 0, whereas undefined becomes NaN.</li>
<li>When applying <code>==</code> to <code>null</code> or <code>undefined</code>, numeric conversion does not happen. null equals only to null or undefined, and does not equal to anything else.</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">null</span> == <span class="number">0</span>  <span class="comment">// false, null is not converted to 0</span></span><br><span class="line"><span class="literal">null</span> == <span class="literal">null</span>  <span class="comment">// true</span></span><br><span class="line"><span class="literal">undefined</span> == <span class="literal">undefined</span>  <span class="comment">// true</span></span><br><span class="line"><span class="literal">null</span> == <span class="literal">undefined</span>  <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p><strong>Final Solution:</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;[1,2,null,3]&quot;</span></span><br><span class="line"><span class="string">&quot;[1,2,null,3]&quot;</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="10-Equal"><a href="#10-Equal" class="headerlink" title="10. Equal"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Equal-1">10. Equal</a></h2><h3 id="题目-9"><a href="#题目-9" class="headerlink" title="题目"></a>题目</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;&#x27;</span> == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> == <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1n</span> == <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27; 1     &#x27;</span> == <span class="literal">true</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-9"><a href="#答案-9" class="headerlink" title="答案"></a>答案</h3><p>==一般会转为数类型进行对比</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-8"><a href="#详细解析-8" class="headerlink" title="详细解析"></a>详细解析</h3><p>I read the <a target="_blank" rel="noopener" href="https://tc39.es/ecma262/#sec-abstract-equality-comparison">ECMA2020-$7.2.14</a> here to finish this quiz</p>
<p>Rules summary:</p>
<ul>
<li>Number &amp; String: convert to Number in priority</li>
<li>Boolean &amp; other: convert boolean to Number, then compare</li>
</ul>
<p>-String &amp; other Object: convert Object ToPrimitive(), then compare</p>
<ul>
<li>undefined, null is special, just remember rules</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="literal">false</span>)  <span class="comment">// ToNumber(false) = 0 -&gt; 0 == 0 -&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;&#x27;</span> == <span class="literal">false</span>)  <span class="comment">// &quot;&quot; == 0 -&gt; ToNumber(&quot;&quot;) == 0 -&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log([] == <span class="literal">false</span>)  <span class="comment">// [] == 0 -&gt; ToNumber([]) == 0 -&gt; 0 == 0 -&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">undefined</span> == <span class="literal">false</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">false</span>)  <span class="comment">// null is not converted to 0 here, false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> == <span class="literal">true</span>)  <span class="comment">// &quot;1&quot; == 1 -&gt; ToNumber(&quot;1&quot;) == 1 -&gt; 1 == 1 -&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1n</span> == <span class="literal">true</span>)  <span class="comment">// 1n == 1 -&gt; ToNumber(1n) == 1 -&gt; 1== 1 -&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27; 1     &#x27;</span> == <span class="literal">true</span>)  <span class="comment">// &quot;1    &quot; == 1 -&gt; ToNumber(&quot;1      &quot;)  == 1 -&gt; true</span></span><br></pre></td></tr></table></figure>

<p>Helpful Notes:</p>
<ul>
<li><p><code>ToNumber()</code> you can explicitly try to call with <code>Number(.....)</code> or use Unary Plus Sign expression: <code>+[], +1n ......</code></p>
</li>
<li><p>String to Number: it first trims the white space and starting zeros, eg:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&quot;01      &quot;  -&gt;   &quot;1&quot;   -&gt;   1</span><br></pre></td></tr></table></figure>

</li>
</ul>
<p>Final solution:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>



<h2 id="11-Implicit-Coercion-II"><a href="#11-Implicit-Coercion-II" class="headerlink" title="11. Implicit Coercion II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Implicit-Conversion-II">11. Implicit Coercion II</a></h2><h3 id="题目-10"><a href="#题目-10" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log([] + [])</span><br><span class="line"><span class="built_in">console</span>.log([] + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[]] + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[<span class="number">1</span>]] + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[[[<span class="number">2</span>]]]] + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] - <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[]] - <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[<span class="number">1</span>]] - <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([[[[<span class="number">2</span>]]]] - <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] + &#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(&#123;&#125; + &#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(&#123;&#125; - &#123;&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="答案-10"><a href="#答案-10" class="headerlink" title="答案"></a>答案</h3><p>+转化为字符串，-转化为数</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;</span></span><br><span class="line"><span class="string">&quot;1&quot;</span></span><br><span class="line"><span class="string">&quot;1&quot;</span></span><br><span class="line"><span class="string">&quot;11&quot;</span></span><br><span class="line"><span class="string">&quot;21&quot;</span></span><br><span class="line">-1</span><br><span class="line">-1</span><br><span class="line">0</span><br><span class="line">1</span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object][object Object]&quot;</span></span><br><span class="line">NaN</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-9"><a href="#详细解析-9" class="headerlink" title="详细解析"></a>详细解析</h3><p>Hey, this puzzle really need to fully and clearly understand some weird and bad parts of Javascript Type coercion for Objects!</p>
<h4 id="I-How-object-converts-to-different-types"><a href="#I-How-object-converts-to-different-types" class="headerlink" title="I. How object converts to different types?"></a>I. How object converts to different types?</h4><p><strong>Strongly Suggest Read this article before start this quiz.</strong> [What is {} + <a target="_blank" rel="noopener" href="https://2ality.com/2012/01/object-plus-object.html">] in JavaScript?</a></p>
<h4 id="II-A-Call-Out-one-of-the-answer-maybe-WRONG-here"><a href="#II-A-Call-Out-one-of-the-answer-maybe-WRONG-here" class="headerlink" title="II. A Call Out: one of the answer maybe WRONG here!"></a>II. A Call Out: one of the answer maybe WRONG here!</h4><p><code>&#123;&#125; + &#123;&#125;</code> - <strong>Firefox &amp; Chrome</strong> handle it differently !!!</p>
<p>Answer is different in two browsers:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// firefox</span></span><br><span class="line">&#123;&#125; + &#123;&#125;; <span class="comment">// NaN </span></span><br><span class="line"><span class="comment">// chrome</span></span><br><span class="line">&#123;&#125; + &#123;&#125;; <span class="comment">// &quot;[object Object][object Object]&quot;</span></span><br></pre></td></tr></table></figure>

<h4 id="III-Explain-parts-of-the-problem"><a href="#III-Explain-parts-of-the-problem" class="headerlink" title="III. Explain parts of the problem"></a>III. Explain parts of the problem</h4><p>I parse all the expression as:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Expression:  value1 +/- value2</span><br><span class="line">prim1 := ToPrimitive(value1)</span><br><span class="line">prim2 := ToPrimitive(value2)</span><br></pre></td></tr></table></figure>

<p><strong>Case1: addition + operator</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">console.log([[]] + 1)</span><br><span class="line">[[]] + 1</span><br><span class="line">prim1: ToPrimitive([[]]) &#x3D; &quot;&quot;</span><br><span class="line">prim2: ToPrimitive(1) &#x3D; 1</span><br><span class="line">one of them is string type, then do string concatenation</span><br><span class="line">&#x3D; &quot;&quot; + 1</span><br><span class="line">&#x3D; &quot;1&quot;</span><br></pre></td></tr></table></figure>

<p><strong>Case2: subtraction - operator</strong></p>
<p>Subtract Op (-) ONLY triggers <strong>ToNumber()</strong> conversion, NO string operation.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">console.log([[]] - 1)</span><br><span class="line">[[]] - 1</span><br><span class="line">prim1: ToPrimitive([[]]) &#x3D; &quot;&quot;</span><br><span class="line">prim2: ToPrimitive(1) &#x3D; 1</span><br><span class="line">Subtract Op (-) makes two parts both convert to Number</span><br><span class="line">&#x3D; ToNumber(&quot;&quot;) + ToNumber(1)</span><br><span class="line">&#x3D; 0 + 1</span><br><span class="line">&#x3D; 1</span><br></pre></td></tr></table></figure>

<p><strong>Case3: object conversion</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">console.log([] + &#123;&#125;)</span><br><span class="line">[] + &#123;&#125;</span><br><span class="line">prim1: ToPrimitive([]) &#x3D; &quot;&quot;</span><br><span class="line">prim2: ToPrimitive(&#123;&#125;) &#x3D; &quot;[object Object]&quot;</span><br><span class="line">Both of them are string, then do string concatenation</span><br><span class="line">&#x3D; ToString(&quot;&quot;) + ToString(&quot;[object Object]&quot;)</span><br><span class="line">&#x3D; &quot;&quot; + &quot;[object Object]&quot;</span><br><span class="line">&#x3D; &quot;[object Object]&quot;</span><br></pre></td></tr></table></figure>

<h4 id="IV-Final-Output"><a href="#IV-Final-Output" class="headerlink" title="IV. Final Output"></a>IV. Final Output</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;</span></span><br><span class="line"><span class="string">&quot;1&quot;</span></span><br><span class="line"><span class="string">&quot;1&quot;</span></span><br><span class="line"><span class="string">&quot;11&quot;</span></span><br><span class="line"><span class="string">&quot;21&quot;</span></span><br><span class="line">-<span class="number">1</span></span><br><span class="line">-<span class="number">1</span></span><br><span class="line"><span class="number">0</span></span><br><span class="line"><span class="number">1</span></span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object][object Object]&quot;</span></span><br><span class="line"><span class="literal">NaN</span></span><br></pre></td></tr></table></figure>



<h2 id="12-arguments"><a href="#12-arguments" class="headerlink" title="12. arguments"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/arguments">12. arguments</a></h2><h3 id="题目-11"><a href="#题目-11" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">log</span>(<span class="params">a,b,c,d</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a,b,c,d)</span><br><span class="line">  <span class="built_in">arguments</span>[<span class="number">0</span>] = <span class="string">&#x27;bfe&#x27;</span></span><br><span class="line">  <span class="built_in">arguments</span>[<span class="number">3</span>] = <span class="string">&#x27;dev&#x27;</span></span><br><span class="line"> </span><br><span class="line">  <span class="built_in">console</span>.log(a,b,c,d)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">log(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-11"><a href="#答案-11" class="headerlink" title="答案"></a>答案</h3><p>要注意d没有被重新赋值，只有arguments[3]被重新赋值</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1,2,3,undefined</span><br><span class="line"><span class="string">&quot;bfe&quot;</span>,2,3,undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-10"><a href="#详细解析-10" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/arguments/discuss">arguments</a> is the actual value passed when function is invoked.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">log(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>

<p>Here 1,2 and 3 are arguments.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Parameter">parameters</a> are local variables in the function.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">log</span>(<span class="params">a,b,c,d</span>)</span>&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>Here a,b,c, and d are parameters.</p>
<p>On execution of</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">arguments</span>[<span class="number">0</span>] = <span class="string">&#x27;bfe&#x27;</span></span><br></pre></td></tr></table></figure>

<p>the first argument i.e 1 is replaced with ‘bfe’.</p>
<p>However, when</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">arguments</span>[<span class="number">3</span>] =<span class="string">&#x27;dev&#x27;</span></span><br></pre></td></tr></table></figure>

<p>is executed it results in</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;0&quot;</span>: <span class="string">&quot;bfe&quot;</span>,</span><br><span class="line">    <span class="string">&quot;1&quot;</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="string">&quot;2&quot;</span>: <span class="number">3</span>,</span><br><span class="line">    <span class="string">&quot;3&quot;</span>: <span class="string">&quot;dev&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>so while accessing d parameter, we get undefined since no only 1,2, and 3 are initially passed as arguments and not d.</p>
<h2 id="13-Operator-precedence"><a href="#13-Operator-precedence" class="headerlink" title="13. Operator precedence"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/operator-precedence">13. Operator precedence</a></h2><h3 id="题目-12"><a href="#题目-12" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="number">1</span> == <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span> == <span class="number">1</span> == <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> &lt; <span class="number">1</span> &lt; <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> &lt; <span class="number">2</span> &lt; <span class="number">3</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span> &gt; <span class="number">1</span> &gt; <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span> &gt; <span class="number">2</span> &gt; <span class="number">1</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-12"><a href="#答案-12" class="headerlink" title="答案"></a>答案</h3><p>从左到右判断，bool要转成number</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-11"><a href="#详细解析-11" class="headerlink" title="详细解析"></a>详细解析</h3><p>When we use any comparison operator like <code>==</code>, <code>&lt;</code> and <code>&gt;</code>, if one of the operands is boolean and another is a number it’ll convert the boolean into a number and then compare i.e. <code>false</code> becomes <code>0</code> and <code>true</code> becomes <code>1</code></p>
<p>Also, these operators work from left to right <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">See this</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="number">1</span> == <span class="number">2</span>) <span class="comment">// false == 2 👉🏻 0 == 2 👉🏻 false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span> == <span class="number">1</span> == <span class="number">0</span>) <span class="comment">// false == 0 👉🏻 0 == 0 👉🏻 true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> &lt; <span class="number">1</span> &lt; <span class="number">2</span>) <span class="comment">// true &lt; 2 👉🏻 1 &lt; 2 👉🏻 true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> &lt; <span class="number">2</span> &lt; <span class="number">3</span>) <span class="comment">// true &lt; 3 👉🏻 1 &lt; 3 👉🏻 true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span> &gt; <span class="number">1</span> &gt; <span class="number">0</span>) <span class="comment">// true &gt; 0 👉🏻 1 &gt; 0 👉🏻 true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span> &gt; <span class="number">2</span> &gt; <span class="number">1</span>) <span class="comment">// true &gt; 1 👉🏻 1 &gt; 1 👉🏻 false</span></span><br></pre></td></tr></table></figure>



<h2 id="14-Addition-vs-Unary-Plus"><a href="#14-Addition-vs-Unary-Plus" class="headerlink" title="14. Addition vs Unary Plus"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Addition-vs-Unary-Plus">14. Addition vs Unary Plus</a></h2><h3 id="题目-13"><a href="#题目-13" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<p>There is a difference between <a target="_blank" rel="noopener" href="https://tc39.es/ecma262/#sec-addition-operator-plus">Addition Operator(+)</a> and <a target="_blank" rel="noopener" href="https://tc39.es/ecma262/#sec-unary-plus-operator">Unary plus operator(+)</a>, even though they use the same ‘+’.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + + <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="string">&#x27;2&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="string">&#x27;2&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">null</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">null</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">null</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">null</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">undefined</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + + <span class="literal">undefined</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-13"><a href="#答案-13" class="headerlink" title="答案"></a>答案</h3><p>三个加号会无视掉中间的，准确来说是先执行最后一个转化为number，再执行倒数第二个依然是number。</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">3</span><br><span class="line">3</span><br><span class="line">3</span><br><span class="line"><span class="string">&quot;12&quot;</span></span><br><span class="line">3</span><br><span class="line"><span class="string">&quot;12&quot;</span></span><br><span class="line"><span class="string">&quot;12&quot;</span></span><br><span class="line">2</span><br><span class="line">2</span><br><span class="line"><span class="string">&quot;1true&quot;</span></span><br><span class="line"><span class="string">&quot;11&quot;</span></span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line"><span class="string">&quot;1null&quot;</span></span><br><span class="line"><span class="string">&quot;10&quot;</span></span><br><span class="line">NaN</span><br><span class="line">NaN</span><br><span class="line"><span class="string">&quot;1undefined&quot;</span></span><br><span class="line"><span class="string">&quot;1NaN&quot;</span></span><br><span class="line"><span class="string">&quot;1NaN&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-12"><a href="#详细解析-12" class="headerlink" title="详细解析"></a>详细解析</h3><p>Addition operator <code>+</code> works on both numbers and strings (used in string concatenation). Hence, if any of the operands is not a number, using <code>+</code> converts all operand/s to string and concatenates.</p>
<p>The unary plus operator (+) precedes its operand and attempts to convert it into a number if it isn’t already.</p>
<p>Also, few things to know</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">+<span class="number">1</span> <span class="comment">// 1</span></span><br><span class="line">+<span class="string">&quot;1&quot;</span> <span class="comment">// 1</span></span><br><span class="line">+<span class="literal">true</span> <span class="comment">// 1</span></span><br><span class="line">+<span class="literal">null</span> <span class="comment">// 0</span></span><br><span class="line">+<span class="literal">undefined</span> <span class="comment">// NaN</span></span><br><span class="line">+<span class="literal">NaN</span> <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>

<p>Remember that the unary operator has higher precedence over the addition operator</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="number">2</span>) <span class="comment">// 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">2</span>) <span class="comment">// 1 + (+2) = 1 + 2 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + + <span class="number">2</span>) <span class="comment">// 1 + (+(+2)) = 1 + 2 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="string">&#x27;2&#x27;</span>) <span class="comment">// &quot;1&quot; + &quot;2&quot; = &quot;12&quot; </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="string">&#x27;2&#x27;</span>) <span class="comment">// 1 + (+2) = 1 + 2 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="number">2</span>) <span class="comment">// &quot;1&quot; + &quot;2&quot; = &quot;12&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="number">2</span>) <span class="comment">// &quot;1&quot; + (+2) = &quot;1&quot; + 2 = &quot;1&quot; + &quot;2&quot; = &quot;12&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">true</span>) <span class="comment">// 1 + 1 = 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">true</span>) <span class="comment">// 1 + (+true) = 1 + 1 = 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">true</span>) <span class="comment">// &quot;1&quot; + &quot;true&quot; = &quot;1true&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">true</span>) <span class="comment">// &quot;1&quot; + (+true) = &quot;1&quot; + 1 = &quot;1&quot; + &quot;1&quot; = &quot;11&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">null</span>) <span class="comment">// 1 + 0 = 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">null</span>) <span class="comment">// 1 + (+null) = 1 + 0 = 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">null</span>) <span class="comment">// &quot;1&quot; + &quot;null&quot; = &quot;1null&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">null</span>) <span class="comment">// &quot;1&quot; + (+null) = &quot;1&quot; + 0 = &quot;1&quot; + &quot;0&quot; = &quot;10&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="literal">undefined</span>) <span class="comment">// 1 + NaN = NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="literal">undefined</span>) <span class="comment">// 1 + (+undefined) = 1 + NaN = NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + <span class="literal">undefined</span>) <span class="comment">// &quot;1&quot; + &quot;undefined&quot; = &quot;1undefined&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="literal">undefined</span>) <span class="comment">// &quot;1&quot; + (+undefined) = &quot;1&quot; + NaN = &quot;1&quot; + &quot;NaN&quot; = &quot;1NaN&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + + <span class="literal">undefined</span>) <span class="comment">// &quot;1&quot; +(+(+undefined)) = &quot;1&quot; + NaN = &quot;1&quot; + &quot;NaN&quot; = &quot;1NaN&quot;</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence</a></p>
<h2 id="15-instanceOf"><a href="#15-instanceOf" class="headerlink" title="15. instanceOf"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/instanceOf">15. instanceOf</a></h2><h3 id="题目-14"><a href="#题目-14" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">null</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>) </span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> <span class="keyword">instanceof</span> <span class="built_in">Number</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="number">1</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">1</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">true</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">true</span> <span class="keyword">instanceof</span> <span class="built_in">Boolean</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">true</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] <span class="keyword">instanceof</span> <span class="built_in">Array</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log((<span class="function">() =&gt;</span> &#123;&#125;) <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-14"><a href="#答案-14" class="headerlink" title="答案"></a>答案</h3><p>对象才有原型链</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;object&quot;</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="string">&quot;boolean&quot;</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-13"><a href="#详细解析-13" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">null</span>);                          <span class="comment">// &quot;object&quot; - &#x27;null&#x27; has &quot;object&quot; type in js (backward compatibility)</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>);               <span class="comment">// false - &#x27;null&#x27; is primitive and doesn&#x27;t have &#x27;instanceof&#x27; keyword</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="number">1</span>);                             <span class="comment">// &quot;number&quot; - one of js types</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> <span class="keyword">instanceof</span> <span class="built_in">Number</span>);                  <span class="comment">// false - &#x27;1&#x27; is primitive and doesn&#x27;t have &#x27;instanceof&#x27; keyword</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>);                  <span class="comment">// false - same as above</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="number">1</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>);          <span class="comment">// false - Number(1) === 1 - same as above</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">1</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>);      <span class="comment">// true - &#x27;new Number(1)&#x27; is object, so it&#x27;s correct</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">true</span>);                          <span class="comment">// &quot;boolean&quot; - one of js types</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">true</span> <span class="keyword">instanceof</span> <span class="built_in">Boolean</span>);              <span class="comment">// false - &#x27;true&#x27; is primitive and doesn&#x27;t have &#x27;instanceof&#x27; keyword</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">true</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>);               <span class="comment">// false - same as above</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>);      <span class="comment">// false - Boolean(true) === true - same as above</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="keyword">instanceof</span> <span class="built_in">Object</span>);  <span class="comment">// true - &#x27;new Boolean(true)&#x27; is object, so it&#x27;s correct</span></span><br><span class="line"><span class="built_in">console</span>.log([] <span class="keyword">instanceof</span> <span class="built_in">Array</span>);                  <span class="comment">// true - &#x27;[]&#x27; is instanceof Array and Object</span></span><br><span class="line"><span class="built_in">console</span>.log([] <span class="keyword">instanceof</span> <span class="built_in">Object</span>);                 <span class="comment">// true - &#x27;[]&#x27; is instanceof Array and Object</span></span><br><span class="line"><span class="built_in">console</span>.log((<span class="function">() =&gt;</span> &#123;&#125;) <span class="keyword">instanceof</span> <span class="built_in">Object</span>);         <span class="comment">// true - if it&#x27;s not a primitive it&#x27;s object. So callback is instanceof object</span></span><br></pre></td></tr></table></figure>



<h2 id="16-parseInt"><a href="#16-parseInt" class="headerlink" title="16. parseInt"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/parseInt">16. parseInt</a></h2><h3 id="题目-15"><a href="#题目-15" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;0&#x27;</span>].map(<span class="built_in">parseInt</span>))</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;0&#x27;</span>,<span class="string">&#x27;1&#x27;</span>].map(<span class="built_in">parseInt</span>))</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;0&#x27;</span>,<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;1&#x27;</span>].map(<span class="built_in">parseInt</span>))</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;0&#x27;</span>,<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;1&#x27;</span>].map(<span class="built_in">parseInt</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-15"><a href="#答案-15" class="headerlink" title="答案"></a>答案</h3><p>注意parseInt第二个参数，没有默认是0</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[0]</span><br><span class="line">[0,NaN]</span><br><span class="line">[0,NaN,1]</span><br><span class="line">[0,NaN,1,1]</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-14"><a href="#详细解析-14" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment"> * parseItn(string, radix) it&#x27;s callback in map(el, index, arr)</span></span><br><span class="line"><span class="comment"> * it means second argument in map is index === second argument in parseInt is radix (from 2 to 36 - by default === 10)</span></span><br><span class="line"><span class="comment"> * example [&quot;0&quot;, &quot;1&quot;, &quot;1&quot;].map(parseInt): parseItn(&quot;0&quot;, 0), parseInt(&quot;1&quot;, 1), parseInt(&quot;1&quot;, 2)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&quot;0&quot;</span>].map(<span class="built_in">parseInt</span>));                 <span class="comment">// [0] - 1st: parseItn(&quot;0&quot;, 0) === 0</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&quot;0&quot;</span>, <span class="string">&quot;1&quot;</span>].map(<span class="built_in">parseInt</span>));            <span class="comment">// [0,NaN] - 2nd: parseInt(&quot;1&quot;, 1) === NaN</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&quot;0&quot;</span>, <span class="string">&quot;1&quot;</span>, <span class="string">&quot;1&quot;</span>].map(<span class="built_in">parseInt</span>));       <span class="comment">// [0,NaN,1] - 3rd: parseInt(&quot;1&quot;, 2) === 1</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&quot;0&quot;</span>, <span class="string">&quot;1&quot;</span>, <span class="string">&quot;1&quot;</span>, <span class="string">&quot;1&quot;</span>].map(<span class="built_in">parseInt</span>));  <span class="comment">// [0,NaN,1,1] - 4th: parseInt(&quot;1&quot;, 3) === 1</span></span><br></pre></td></tr></table></figure>



<h2 id="17-reduce"><a href="#17-reduce" class="headerlink" title="17. reduce"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/reduce">17. reduce</a></h2><h3 id="题目-16"><a href="#题目-16" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">a,b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a,b)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">a,b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a,b)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-16"><a href="#答案-16" class="headerlink" title="答案"></a>答案</h3><p>reduce根据初始值决定后续的值</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1,2</span><br><span class="line">undefined,3</span><br><span class="line">0,1</span><br><span class="line">undefined,2</span><br><span class="line">undefined,3</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-15"><a href="#详细解析-15" class="headerlink" title="详细解析"></a>详细解析</h3><p>Modify the example and add semi colons on lines 3 and the last line:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">a,b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a,b)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">a,b</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a,b)</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br></pre></td></tr></table></figure>

<p>The output is tricky as it’s worth knowing the exact API of reduce:</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce</a></p>
<blockquote>
<p>If you don’t supply an initial value then the FIRST value is used (and skipped!)</p>
</blockquote>
<p>First:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>,<span class="number">2</span></span><br><span class="line"><span class="literal">undefined</span>,<span class="number">3</span> <span class="comment">// note, undefined as we don&#x27;t return from our reduce</span></span><br></pre></td></tr></table></figure>

<p>Second</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0</span>,<span class="number">1</span></span><br><span class="line"><span class="literal">undefined</span>,<span class="number">2</span> <span class="comment">// undefined as we don&#x27;t return from our reduce</span></span><br><span class="line"><span class="literal">undefined</span>,<span class="number">3</span></span><br></pre></td></tr></table></figure>



<h2 id="18-Promise-executor-II"><a href="#18-Promise-executor-II" class="headerlink" title="18. Promise executor II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Promise-executor-II">18. Promise executor II</a></h2><h3 id="题目-17"><a href="#题目-17" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p1 = <span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> resolve(p1))</span><br><span class="line"><span class="keyword">const</span> p3 = <span class="built_in">Promise</span>.resolve(p1)</span><br><span class="line"><span class="keyword">const</span> p4 = p2.then(<span class="function">() =&gt;</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> resolve(p3)))</span><br><span class="line"><span class="keyword">const</span> p5 = p4.then(<span class="function">() =&gt;</span> p4)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(p1 == p2)</span><br><span class="line"><span class="built_in">console</span>.log(p1 == p3)</span><br><span class="line"><span class="built_in">console</span>.log(p3 == p4)</span><br><span class="line"><span class="built_in">console</span>.log(p4 == p5)</span><br></pre></td></tr></table></figure>

<h3 id="答案-17"><a href="#答案-17" class="headerlink" title="答案"></a>答案</h3><p>p1、p3</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-16"><a href="#详细解析-16" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> p1 = <span class="built_in">Promise</span>.resolve(<span class="number">1</span>) <span class="comment">// p1 is 1 Promise, Object=&gt; `Promise &#123; 1 &#125;`</span></span><br><span class="line"><span class="keyword">const</span> p2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> resolve(p1)) <span class="comment">// p2 is a pending promise, Object =&gt; `Promise &#123; &lt;pending&gt; &#125;`</span></span><br><span class="line"><span class="comment">// new Promise.resolve(arg) // if arg instance of Promise, then return arg directly.</span></span><br><span class="line"><span class="keyword">const</span> p3 = <span class="built_in">Promise</span>.resolve(p1) <span class="comment">// p3 is 1 (p3 is essentially Promise.resolve(1) ), Object =&gt; pointing to same object that `p1` is pointing i.e. `Promise &#123; 1 &#125;`</span></span><br><span class="line"><span class="keyword">const</span> p4 = p2.then(<span class="function">() =&gt;</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> resolve(p3))) <span class="comment">// p4 is a pending promise since .then() returns a new promise,  Object =&gt; `Promise &#123; &lt;pending&gt; &#125;`</span></span><br><span class="line"><span class="keyword">const</span> p5 = p4.then(<span class="function">() =&gt;</span> p4) <span class="comment">//  p5 is a pending promise since  .then() returns a new promise, / Object =&gt; `Promise &#123; &lt;pending&gt; &#125;`</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> x = p1.then(<span class="function"><span class="params">x</span>=&gt;</span>x)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(p1, x)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(p1 == p2); <span class="comment">// false as both are pointing to different object</span></span><br><span class="line"><span class="built_in">console</span>.log(p1 == p3); <span class="comment">// true as both point to same object</span></span><br><span class="line"><span class="built_in">console</span>.log(p3 == p4); <span class="comment">// false as both are pointing to different object</span></span><br><span class="line"><span class="built_in">console</span>.log(p4 == p5); <span class="comment">// false as both are pointing to different object</span></span><br></pre></td></tr></table></figure>



<h2 id="19-this"><a href="#19-this" class="headerlink" title="19. this"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/this">19. <code>this</code></a></h2><h3 id="题目-18"><a href="#题目-18" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">c</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a)</span><br><span class="line">  &#125;,</span><br><span class="line">  d: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a)</span><br><span class="line">  &#125;,</span><br><span class="line">  e: (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)(),</span><br><span class="line">  f: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.a)</span><br><span class="line">obj.b()</span><br><span class="line">;(obj.b)()</span><br><span class="line"><span class="keyword">const</span> b = obj.b</span><br><span class="line">b()</span><br><span class="line">obj.b.apply(&#123;<span class="attr">a</span>: <span class="number">2</span>&#125;)</span><br><span class="line">obj.c()</span><br><span class="line">obj.d()</span><br><span class="line">;(obj.d)()</span><br><span class="line">obj.d.apply(&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;)</span><br><span class="line">obj.e()</span><br><span class="line">;(obj.e)()</span><br><span class="line">obj.e.call(&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;)</span><br><span class="line">obj.f()()</span><br><span class="line">;(obj.f())()</span><br><span class="line">obj.f().call(&#123;<span class="attr">a</span>:<span class="number">2</span>&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="答案-18"><a href="#答案-18" class="headerlink" title="答案"></a>答案</h3><p>注意箭头函数只与所在位置外层函数有关，call、appy无效</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">2</span><br><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-17"><a href="#详细解析-17" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - obj =&gt; it points to a object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `obj` is defined </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">c</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">  &#125;,</span><br><span class="line">  d: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">  &#125;,</span><br><span class="line">  e: (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;)(), <span class="comment">// IIFE, `e: ()=&gt;console.log(this.a)`</span></span><br><span class="line">  f: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">/* Arrow function doesn&#x27;t have `this` binding it use `this` value of nearest</span></span><br><span class="line"><span class="comment">    function or otherwise global object. */</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.a);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.a); <span class="comment">// 1 =&gt; straight forward, call property in obj 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* In `b` execution environment</span></span><br><span class="line"><span class="comment">  - this -&gt; `a` obj</span></span><br><span class="line"><span class="comment">  Thus, it will print `1` */</span></span><br><span class="line">obj.b(); <span class="comment">// 1 =&gt; function b is called from obj</span></span><br><span class="line">;(obj.b)() <span class="comment">// 1 =&gt; () IIFE is the expression, it doesnt change the way we call the function. same as above</span></span><br><span class="line"><span class="keyword">const</span> b = obj.b;</span><br><span class="line">b(); <span class="comment">// undefined =&gt; obj.b return the function and reference to the obj is lost, `this===window` =&gt; undefined</span></span><br><span class="line">obj.b.apply(&#123; <span class="attr">a</span>: <span class="number">2</span> &#125;); <span class="comment">// 2 =&gt; here function b is binded with &#123;a: 2&#125;, hence 2</span></span><br><span class="line">obj.c(); <span class="comment">// 1 =&gt; c function is called with obj, hence 1</span></span><br><span class="line">obj.d(); <span class="comment">// undefined =&gt; here d is arrow function, which is lexically scoped, thus `this===window`, so will print `undefined`</span></span><br><span class="line">;(obj.d)() <span class="comment">// undefined =&gt; () is the expression, it doesn&#x27;t change the way we call the function. same as above</span></span><br><span class="line">obj.d.apply(&#123; <span class="attr">a</span>: <span class="number">2</span> &#125;); <span class="comment">// undefined.  d is arrow function which is lexically scoped, we cant re-bind &#x27;this&#x27; reference to arrow function, so `apply`, `call`, &amp; `bind` don&#x27;t work on arrow function.</span></span><br><span class="line">obj.e() <span class="comment">// undefined =&gt; e is the IIFE, which has its own scope. and a is not present in it. hence undefined</span></span><br><span class="line">;(obj.e)() <span class="comment">// undefined =&gt; e is IIFE, obj.e is invoked and have return arrow function, which cant be re-bined. It doesnt change the way we call the function. same as above</span></span><br><span class="line">obj.e.call(&#123; <span class="attr">a</span>: <span class="number">2</span> &#125;); <span class="comment">// undefined =&gt; e is IIFE, obj.e is invoked and have return arrow function, which cant be re-bined `call` won&#x27;t have any effect because it is arrow function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Arrow function doesn&#x27;t have `this` binding it use `this` value of nearest</span></span><br><span class="line"><span class="comment">    function or otherwise global object. */</span></span><br><span class="line"><span class="comment">// `obj.f()===()=&gt;console.log(this.a)`, this arrow function was defined inside</span></span><br><span class="line"><span class="comment">// another fn which had `this===obj`, thus it will return `obj.a===1`.</span></span><br><span class="line">obj.f()(); <span class="comment">// 1 =&gt; same as above1</span></span><br><span class="line">obj.f().call(&#123; <span class="attr">a</span>: <span class="number">2</span> &#125;); <span class="comment">// 1 =&gt; same as above. note: arrow function cant be re-bind. its lexically scoped</span></span><br></pre></td></tr></table></figure>



<h2 id="20-name-for-Function-expression"><a href="#20-name-for-Function-expression" class="headerlink" title="20. name for Function expression"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/name-for-Function-expression">20. name for Function expression</a></h2><h3 id="题目-19"><a href="#题目-19" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> b = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c = <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line">  d = <span class="string">&#x27;e&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> b)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> c)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line">c()</span><br></pre></td></tr></table></figure>

<h3 id="答案-19"><a href="#答案-19" class="headerlink" title="答案"></a>答案</h3><p>主要是考察匿名函数的重新赋值无效</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;function&quot;</span></span><br><span class="line"><span class="string">&quot;function&quot;</span></span><br><span class="line"><span class="string">&quot;function&quot;</span></span><br><span class="line"><span class="string">&quot;undefined&quot;</span></span><br><span class="line"><span class="string">&quot;function&quot;</span></span><br><span class="line"><span class="string">&quot;function&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-18"><a href="#详细解析-18" class="headerlink" title="详细解析"></a>详细解析</h3><ul>
<li><code>a</code> is a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function Declaration</a> and has data type <code>function</code></li>
<li><code>b</code> and <code>c</code> are <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#description">Function Expression</a> and have data type <code>function</code></li>
<li><code>d</code> is a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#named_function_expression">Named Function Expression</a> This name <code>d</code> is then local only to the function body (scope) hence outside the function body <code>typeof d</code> returns <code>undefined</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - b, c =&gt; undefined,</span></span><br><span class="line"><span class="comment">  - a =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - b &amp; c =&gt; point to yet another but different callable objects</span></span><br><span class="line"><span class="comment"> */</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">const</span> b = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c = <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d);</span><br><span class="line">  d = <span class="string">&quot;e&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a); <span class="comment">// &quot;function&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> b); <span class="comment">// &quot;function&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> c); <span class="comment">// &quot;function&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// undefined.  `d` is hoisted out of function `c` but it was undefined</span></span><br><span class="line"><span class="comment">// assigned happens after function `c` is invoked.</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> d);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">`C Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">  - this: window </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - b, c =&gt; undefined,</span></span><br><span class="line"><span class="comment">  - a =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - b &amp; c =&gt; point to yet another but different callable objects</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  Now, inside a `named function expression`, function name as a variable is available.</span></span><br><span class="line"><span class="comment">  If another variable is declared using `var` then it will overshadow `function binding,</span></span><br><span class="line"><span class="comment">  but it will be declared without `var` then it can&#x27;t overshadow `function binding`. </span></span><br><span class="line"><span class="comment">Thus, inside the function execution environment, it will point to the function itself but after </span></span><br><span class="line"><span class="comment">  function execution environment destroyed it will be shown value assigned to it.</span></span><br><span class="line"><span class="comment">  </span></span><br><span class="line"><span class="comment">  Thus, in this case, both `console.log` in `function c()` with print &quot;function&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">c();</span><br></pre></td></tr></table></figure>

<p>The special case is inside the named function <code>d</code>. <strong>The function name is un-reassignable inside the function</strong>. You can easily see the difference if you run this in <code>&quot;use strict&quot;</code> mode where it gives an error <code>Uncaught TypeError: Assignment to constant variable</code>. Thus, <code>d</code> will still point to the named function <code>d</code> despite being reassigned to <code>&quot;e&quot;</code></p>
<p>Note that, the result would have been different if we had redeclared <code>d</code> as <code>var d = &quot;e&quot;</code> in which case the next console.log would have printed <code>string</code> <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-should-i-use-it-or-omit-it/1471738#1471738">See the Diff</a></p>
<h2 id="21-Array-I"><a href="#21-Array-I" class="headerlink" title="21. Array I"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Array-I">21. Array I</a></h2><h3 id="题目-20"><a href="#题目-20" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = [<span class="number">0</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a.length)</span><br><span class="line">a[<span class="number">3</span>] = <span class="number">3</span></span><br><span class="line"><span class="built_in">console</span>.log(a.length)</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> a) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item)</span><br><span class="line">&#125;</span><br><span class="line">a.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;<span class="built_in">console</span>.log(item)&#125;)</span><br><span class="line">a.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;<span class="built_in">console</span>.log(item)&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(a))</span><br><span class="line"><span class="keyword">delete</span> a[<span class="number">3</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a.length)</span><br><span class="line">a[<span class="number">2</span>] = <span class="number">2</span></span><br><span class="line">a.length = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(a[<span class="number">0</span>],a[<span class="number">1</span>],a[<span class="number">2</span>])</span><br></pre></td></tr></table></figure>

<h3 id="答案-20"><a href="#答案-20" class="headerlink" title="答案"></a>答案</h3><p>注意length不会因为delete减少，重新设置后，后面的就算有值也是undefined,ES5方法跳过空位</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">4</span><br><span class="line">0</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">3</span><br><span class="line">0</span><br><span class="line">3</span><br><span class="line">0</span><br><span class="line">3</span><br><span class="line">[<span class="string">&quot;0&quot;</span>,<span class="string">&quot;3&quot;</span>]</span><br><span class="line">4</span><br><span class="line">0,undefined,undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-19"><a href="#详细解析-19" class="headerlink" title="详细解析"></a>详细解析</h3><p>In JavaScript, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">arrays</a> aren’t primitives but are instead Array objects</p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a> property of an Array sets or returns the number of elements in that array. You can set the length property to truncate an array at any time. The thing to remember is that the <code>length</code> property does not necessarily indicate the number of defined values in the array</p>
<p>In <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#description">Array.map()</a> callback is invoked only for indexes of the array which have assigned values (including undefined). It is not called for missing elements of the array</p>
<p>Similarly, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#no_operation_for_uninitialized_values_sparse_arrays">Array.forEach()</a> is not invoked for index properties that have been deleted or are uninitialized</p>
<p>Arrays being very similar to Objects allow <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a> to be called on it returning the indexes as an array. However, for sparse arrays, only the defined indexes are returned</p>
<p>Deleting array element using <code>delete</code> just unassigns the value (making it empty) at that index</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = [<span class="number">0</span>]</span><br><span class="line"><span class="built_in">console</span>.log(a.length) <span class="comment">// 1 Since array contains one element</span></span><br><span class="line">a[<span class="number">3</span>] = <span class="number">3</span> <span class="comment">// a = [0, empty, empty, 3]</span></span><br><span class="line"><span class="built_in">console</span>.log(a.length) <span class="comment">// 4 Since array contains four elements now(even though only 2 elements are defined)</span></span><br><span class="line"><span class="comment">// 4, array length increase to contain last index. Unfilled slots in </span></span><br><span class="line"><span class="comment">// middle remain empty. Accessing them return `undefined`. Such arrays are called</span></span><br><span class="line"><span class="comment">// sparse array. These have holes in them.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// for-of loop iterate to both holes and elments</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> a) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item) <span class="comment">// prints all the array items</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// `map`, `filter`, `forEach` all these skips holes.</span></span><br><span class="line">a.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;<span class="built_in">console</span>.log(item)&#125;) <span class="comment">// only called for assigned values</span></span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line">a.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;<span class="built_in">console</span>.log(item)&#125;) <span class="comment">// only called for assigned values</span></span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object.keys also skips holes</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.keys(a)) <span class="comment">// [&quot;0&quot;,&quot;3&quot;] only defined indexes are retuned</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// deleting array elment does reduce its length. It just makes that index</span></span><br><span class="line"><span class="comment">// hole or emoty. Accessing it will return `undefined`</span></span><br><span class="line"><span class="keyword">delete</span> a[<span class="number">3</span>] <span class="comment">// deletes/unassigns that index</span></span><br><span class="line"><span class="comment">// a = [0, empty, empty, empty]</span></span><br><span class="line"><span class="built_in">console</span>.log(a.length) <span class="comment">// 4 since length remains unaffected</span></span><br><span class="line"></span><br><span class="line">a[<span class="number">2</span>] = <span class="number">2</span> <span class="comment">// a = [0, empty, 2, empty]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// changing length of an array, remove all elements beyond mentined length.</span></span><br><span class="line">a.length = <span class="number">1</span> <span class="comment">// this actually truncates the array so that length is only 1 now</span></span><br><span class="line"><span class="comment">// a = [0]</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a[<span class="number">0</span>],a[<span class="number">1</span>],a[<span class="number">2</span>]) <span class="comment">// 0,undefined,undefined</span></span><br></pre></td></tr></table></figure>



<h2 id="22-min-max"><a href="#22-min-max" class="headerlink" title="22. min max"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/min-max">22. min max</a></h2><h3 id="题目-21"><a href="#题目-21" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(<span class="number">1</span>,<span class="number">2</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],<span class="number">1</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-21"><a href="#答案-21" class="headerlink" title="答案"></a>答案</h3><p>最大的数和最小的数默认是-Infinity和Infinity，一旦输入有NaN，输出必然是NaN</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Infinity</span><br><span class="line">-Infinity</span><br><span class="line">1</span><br><span class="line">2</span><br><span class="line">NaN</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-20"><a href="#详细解析-20" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min()) <span class="comment">// Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max()) <span class="comment">// -Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="number">1</span>)) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(<span class="number">1</span>,<span class="number">2</span>)) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>])) <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>

<p><code>Math.min()</code> function returns the smallest numbers given as input parameters</p>
<p><code>Math.max()</code> function returns the largest numbers given as input parameters</p>
<p><code>1.</code> If no parameters are passed, <code>Math.min()</code> returns <code>Infinity</code>. This can be understood if you think of implementing this logic yourself, we’ll set the min value as the largest possible value i.e. <code>Infinity</code>, and will loop over the parameters and compare the current value with this min value and update if current &lt; min. In the end, we return min. Now, since no parameters are passed, we return <code>Infinity</code>.</p>
<p><code>2.</code> The inverse of this logic applies to <code>Math.max()</code> that returns <code>-Infinity</code> when no parameters are passed.</p>
<p><code>3.</code> &amp; <code>4.</code> Usual behavior</p>
<p><code>5.</code> If any one or more of the parameters cannot be converted into a number, <code>NaN</code> is returned by both methods.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min</a></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max</a></p>
<h2 id="23-Promise-all"><a href="#23-Promise-all" class="headerlink" title="23. Promise.all()"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Promise-all">23. Promise.all()</a></h2><h3 id="题目-22"><a href="#题目-22" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value)</span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error)</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([<span class="number">1</span>,<span class="number">2</span>,<span class="built_in">Promise</span>.resolve(<span class="number">3</span>), <span class="built_in">Promise</span>.resolve(<span class="number">4</span>)]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value)</span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error)</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([<span class="number">1</span>,<span class="number">2</span>,<span class="built_in">Promise</span>.resolve(<span class="number">3</span>), <span class="built_in">Promise</span>.reject(<span class="string">&#x27;error&#x27;</span>)]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value)</span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<h3 id="答案-22"><a href="#答案-22" class="headerlink" title="答案"></a>答案</h3><p>一旦有reject，进入catch</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[]</span><br><span class="line">[1,2,3,4]</span><br><span class="line"><span class="string">&quot;error&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-21"><a href="#详细解析-21" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a> method takes an iterable of promises as an input and returns a single Promise that resolves to an array of the results of the input promises</p>
<p>It rejects immediately upon any of the input promises rejecting or non-promises throwing an error and will reject with this first rejection message/error.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value) <span class="comment">// resolves with empty array []</span></span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error)</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([<span class="number">1</span>,<span class="number">2</span>,<span class="built_in">Promise</span>.resolve(<span class="number">3</span>), <span class="built_in">Promise</span>.resolve(<span class="number">4</span>)]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value) <span class="comment">// all promises resolve so returns [1,2,3,4]</span></span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error)</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">await</span> <span class="built_in">Promise</span>.all([<span class="number">1</span>,<span class="number">2</span>,<span class="built_in">Promise</span>.resolve(<span class="number">3</span>), <span class="built_in">Promise</span>.reject(<span class="string">&#x27;error&#x27;</span>)]).then(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(value)</span><br><span class="line">  &#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error) <span class="comment">// since 4th promise rejected, Promise.all also rejects with that value</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="comment">// []</span></span><br><span class="line"><span class="comment">// [1,2,3,4]</span></span><br><span class="line"><span class="comment">// &quot;error&quot;           </span></span><br></pre></td></tr></table></figure>



<h2 id="24-Equality-amp-Sameness"><a href="#24-Equality-amp-Sameness" class="headerlink" title="24. Equality &amp; Sameness"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Equality-Sameness">24. Equality &amp; Sameness</a></h2><h3 id="题目-23"><a href="#题目-23" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="string">&#x27;0&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="string">&#x27;0&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="string">&#x27;0&#x27;</span>))</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="number">0</span>))</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == -<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === -<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, -<span class="number">0</span>))</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>))</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="literal">false</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-23"><a href="#答案-23" class="headerlink" title="答案"></a>答案</h3><p>==会有隐式转换，但关于NaN，0与-0判断有部分问题，Object.is完全相等</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-22"><a href="#详细解析-22" class="headerlink" title="详细解析"></a>详细解析</h3><p>In a nutshell,</p>
<blockquote>
<p>The equality operator (==) checks whether its two operands are equal, it attempts to convert and compare operands that are of different types</p>
</blockquote>
<blockquote>
<p>The strict equality operator (===) checks whether its two operands are equal without any implicit conversion</p>
</blockquote>
<blockquote>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a> method determines whether two values are the same value. Note that this is not the same as being equal according to the == or === operator</p>
</blockquote>
<p>Also, note that in Javascript, 0 is represented as both -0 and +0 (where 0 is an alias for +0). In practice, there is almost no difference between the different representations; for example, +0 === -0 is true. This difference can be noticed when using <code>Object.is</code> for comparison</p>
<p><code>NaN</code> compares unequal (via ==, !=, ===, and !==) to any other value – including to another <code>NaN</code> value. However, <code>Object.is</code> gives a true result.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="string">&#x27;0&#x27;</span>) <span class="comment">// true (after type conversion &#x27;0&#x27; = 0)</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="string">&#x27;0&#x27;</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="string">&#x27;0&#x27;</span>)) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="number">0</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="number">0</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="number">0</span>)) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == -<span class="number">0</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === -<span class="number">0</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, -<span class="number">0</span>)) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>)) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="literal">false</span>) <span class="comment">// true (after type conversion false = 0)</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === <span class="literal">false</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="literal">false</span>)) <span class="comment">// false</span></span><br></pre></td></tr></table></figure>



<h2 id="25-zero"><a href="#25-zero" class="headerlink" title="25. zero"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/zero">25. zero</a></h2><h3 id="题目-24"><a href="#题目-24" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(-<span class="number">1</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === -<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, -<span class="number">0</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.round(-<span class="number">0.5</span>)))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.round(<span class="number">0.5</span>)))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> * <span class="literal">Infinity</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> / <span class="literal">Infinity</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.sign(<span class="number">0</span>)))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.sign(-<span class="number">0</span>)))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / -<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1n</span> / <span class="number">0n</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-24"><a href="#答案-24" class="headerlink" title="答案"></a>答案</h3><p>Object.is完全相等，区分0与-0，Math.round(-0.5)=-0， Math.sign(-0)=-0，bigInt除法会报错</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">Infinity</span><br><span class="line">-Infinity</span><br><span class="line">NaN</span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line">NaN</span><br><span class="line">NaN</span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line">-Infinity</span><br><span class="line">Infinity</span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-23"><a href="#详细解析-23" class="headerlink" title="详细解析"></a>详细解析</h3><p>In Javascript, <code>number</code> data type has only one integer with multiple representations: 0 is represented as both -0 and +0 (where 0 is an alias for +0). In practice, there is almost no difference between the different representations; for example, +0 === -0 is true. However, you are able to notice this when you divide by zero</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">42</span> / +<span class="number">0</span>) <span class="comment">// Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">42</span> / -<span class="number">0</span>) <span class="comment">// -Infinity</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description">Object.is()</a> method determines whether two values are the same value. This is not the same as being equal according to the == operator. The == operator applies various coercions to both sides (if they are not the same Type)</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign">Math.sign()</a> function returns either a positive or negative +/- 1, indicating the sign of a number passed into the argument. If the number passed into Math.sign() is 0, it will return a +/- 0.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>) <span class="comment">// Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(-<span class="number">1</span> / <span class="number">0</span>) <span class="comment">// -Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="number">0</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> === -<span class="number">0</span>) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// false. This is confusing so remember this case for</span></span><br><span class="line"><span class="comment">// `Object.is`, `+0` &amp; `-0` are different.</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, -<span class="number">0</span>)) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// false. This is confusing too. Remember `Math.round(-0.5)===-0`</span></span><br><span class="line"><span class="comment">// &amp; `Math.round(-0.51)===-1`. Here we have `Object.is(0,-0)`=&gt; false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.round(-<span class="number">0.5</span>))) <span class="comment">// Object.is(0, -0) = false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// false. This is confusing too. Remember `Math.round(0.5)===1`</span></span><br><span class="line"><span class="comment">// &amp; `Math.round(0.49)===0`. Here we have `Object.is(0,1)`=&gt; false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.round(<span class="number">0.5</span>))) <span class="comment">// Object.is(0, 1) = false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> * <span class="literal">Infinity</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> / <span class="literal">Infinity</span>) <span class="comment">// NaN</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// true. Remember for negative number `Math.sign` gives `-1`, for</span></span><br><span class="line"><span class="comment">// postive `1` &amp; for zero `0`. Here we have `Object.is(0,0)`=&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.sign(<span class="number">0</span>))) <span class="comment">// Object.is(0, 0) = true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// false. we have `Object(0,-1)` =&gt; false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="number">0</span>, <span class="built_in">Math</span>.sign(-<span class="number">0</span>))) <span class="comment">// Object.is(0, -0) = false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / -<span class="number">0</span>) <span class="comment">// -Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>) <span class="comment">// Infinity</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Error. For bigInt divion by `0n` throw TypeError. Otherwise</span></span><br><span class="line"><span class="comment">// other division just give us quotient just like other languages.</span></span><br><span class="line"><span class="comment">// e.g. 5n/2n=2n</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1n</span> / <span class="number">0n</span>) <span class="comment">// gives RangeError in BigInt</span></span><br></pre></td></tr></table></figure>



<h2 id="26-true-or-false"><a href="#26-true-or-false" class="headerlink" title="26. true or false"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/true-or-false">26. true or false</a></h2><h3 id="题目-25"><a href="#题目-25" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log([] == <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log([] == <span class="literal">false</span>)</span><br><span class="line"><span class="built_in">console</span>.log(!![])</span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(!![<span class="number">1</span>])</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>([]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="keyword">new</span> <span class="built_in">Boolean</span>([])))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">false</span>)))</span><br></pre></td></tr></table></figure>

<h3 id="答案-25"><a href="#答案-25" class="headerlink" title="答案"></a>答案</h3><p>==隐式转换</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-24"><a href="#详细解析-24" class="headerlink" title="详细解析"></a>详细解析</h3><p><code>==</code> follows certain rules when comparing operands. If the operands are of different types, try to convert them to the same type before comparing</p>
<p>In <code>Boolean()</code>, if the value is omitted or is <code>0, -0, null, false, NaN, undefined, empty string (&quot;&quot;)</code> it is falsy. All other values are truthy. Any object of which the value is not <code>undefined</code> or <code>null</code>, including a Boolean object whose value is <code>false</code>, evaluates to <code>true</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Number([]) // 0</span></span><br><span class="line"><span class="comment">// Number(false) // 0</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log([] == <span class="number">0</span>)  <span class="comment">// 0 == 0 is true, [] is converted to number [] =&gt; 0,</span></span><br><span class="line"><span class="built_in">console</span>.log([] == <span class="literal">false</span>) <span class="comment">// 0 == 0 is true, converted to number and then to boolean. 0 == false =&gt; false == false</span></span><br><span class="line"><span class="built_in">console</span>.log(!![]) <span class="comment">// !(![]) = !(!true) = !(false) = true, Boolean convertion, anything other than &#x27;&#x27;, 0, false is true, !!true =&gt; !false =&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="number">1</span>) <span class="comment">// 1 == 1 = true. number convertion</span></span><br><span class="line"><span class="built_in">console</span>.log(!![<span class="number">1</span>]) <span class="comment">// !(![1]) = !(false) =true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>([])) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// new Boolean([]) returns an object</span></span><br><span class="line"><span class="comment">// new Boolean(false) This also returns an object</span></span><br><span class="line"><span class="comment">// Boolean(any object) will be true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="keyword">new</span> <span class="built_in">Boolean</span>([]))) <span class="comment">// Boolean(some object) is true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">false</span>))) <span class="comment">// Boolean(some object) is true</span></span><br></pre></td></tr></table></figure>



<h2 id="27-Hoisting-I"><a href="#27-Hoisting-I" class="headerlink" title="27. Hoisting I"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-I">27. Hoisting I</a></h2><h3 id="题目-26"><a href="#题目-26" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b</span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br><span class="line">b = <span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(c)</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(d)</span><br><span class="line"><span class="keyword">let</span> d = <span class="number">2</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-26"><a href="#答案-26" class="headerlink" title="答案"></a>答案</h3><p>变量提升</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-25"><a href="#详细解析-25" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(a)  <span class="comment">// a will be 1 since initialised before this</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// b will be declared a value and not assigned</span></span><br><span class="line">b = <span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(c) <span class="comment">// c is not declared with var below this so c default value will // be undefined even though it is declared after this</span></span><br><span class="line"><span class="keyword">var</span> c = <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(d) <span class="comment">// d is not declared it is in Temporal Dead Zone so can&#x27;t be used before assigned or declared</span></span><br><span class="line"><span class="keyword">let</span> d = <span class="number">2</span></span><br></pre></td></tr></table></figure>



<h2 id="28-Hoisting-II"><a href="#28-Hoisting-II" class="headerlink" title="28. Hoisting II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-II">28. Hoisting II</a></h2><h3 id="题目-27"><a href="#题目-27" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> func1 = <span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line">func1()</span><br><span class="line"></span><br><span class="line">func2()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">func3()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func3 = <span class="function"><span class="keyword">function</span> <span class="title">func4</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="答案-27"><a href="#答案-27" class="headerlink" title="答案"></a>答案</h3><p>变量提升</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-26"><a href="#详细解析-26" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> func1 = <span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line">func1() <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line">func2() <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func3() <span class="comment">// Error</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func3 = <span class="function"><span class="keyword">function</span> <span class="title">func4</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> is the process whereby the interpreter moves the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code.</p>
</blockquote>
<p><code>func1</code> is normal execution</p>
<p>We are able to execute <code>func2</code> before declaring it because of hoisting.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">func3&#96; is a Function Expression. Only declarations are hoisted and not initialization, hence &#96;func3&#96; is available but it is &#96;undefined&#96; before initialization. When we try to run &#96;func3()&#96; it throws an error &#96;Uncaught TypeError: func3 is not a function</span><br></pre></td></tr></table></figure>



<h2 id="29-Hoisting-III"><a href="#29-Hoisting-III" class="headerlink" title="29. Hoisting III"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-III">29. Hoisting III</a></h2><h3 id="题目-28"><a href="#题目-28" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  a = <span class="number">2</span></span><br><span class="line">  <span class="built_in">console</span>.log(a)</span><br><span class="line">  <span class="keyword">var</span> a</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (!(<span class="string">&#x27;b&#x27;</span> <span class="keyword">in</span> <span class="built_in">window</span>)) &#123;</span><br><span class="line">  <span class="keyword">var</span> b = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br></pre></td></tr></table></figure>

<h3 id="答案-28"><a href="#答案-28" class="headerlink" title="答案"></a>答案</h3><p>变量提升，b提前声明</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">2</span><br><span class="line">1</span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-27"><a href="#详细解析-27" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).</p>
</blockquote>
<p>Here, in this example inside function <code>func</code> the <code>var a</code> gets hoisted to top and hence <code>a=2</code> in that function. More so, since <code>a</code> is declared in that function only it is having a function scope i.e. it doesn’t leak outside. That’s why outside <code>func</code>, <code>a</code> is still 1</p>
<p>The variable <code>b</code> on the other hand is just declared inside a block so it gets hoisted to the top of the script. That’s why <code>&#39;b&#39; in window</code> evaluates to true and its not going into <code>if</code> block and prints <code>undefined</code> instead</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// variable declared with `var` are hoisted to the top of the function scope</span></span><br><span class="line"><span class="comment">// which is just like:</span></span><br><span class="line"><span class="comment">// function func() &#123;</span></span><br><span class="line"><span class="comment">// 	var a</span></span><br><span class="line"><span class="comment">//  a = 2</span></span><br><span class="line"><span class="comment">//  console.log(a)</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  a = <span class="number">2</span></span><br><span class="line">  <span class="built_in">console</span>.log(a)</span><br><span class="line">  <span class="keyword">var</span> a</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">func() <span class="comment">// 2 (inside the func)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// the variable &#x27;a&#x27; declared in function will be destoried as soon as the function exists</span></span><br><span class="line"><span class="comment">// print 1, the global variable &#x27;a&#x27; is printed out</span></span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// 1 (outside value doesnt change)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// the same as &#x27;a&#x27;, &#x27;b&#x27; is hoisted, like:</span></span><br><span class="line"><span class="comment">// var b</span></span><br><span class="line"><span class="comment">// if (!(&#x27;b&#x27; in window)) &#123;</span></span><br><span class="line"><span class="comment">//  b = 1</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="keyword">if</span> (!(<span class="string">&#x27;b&#x27;</span> <span class="keyword">in</span> <span class="built_in">window</span>)) &#123; <span class="comment">// b is present though its undefined</span></span><br><span class="line">  <span class="keyword">var</span> b = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// b is declared but not defined</span></span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br></pre></td></tr></table></figure>



<h2 id="30-Equal-II"><a href="#30-Equal-II" class="headerlink" title="30. Equal II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Equal-II">30. Equal II</a></h2><h3 id="题目-29"><a href="#题目-29" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<p>ref to the <a target="_blank" rel="noopener" href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">The Abstract Equality Comparison Algorithm</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;1&#x27;</span>] == <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;1&#x27;</span>] == <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == [<span class="string">&#x27;1&#x27;</span>])</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">false</span>) == [<span class="number">0</span>])</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">false</span>) == [<span class="number">0</span>])</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">undefined</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-29"><a href="#答案-29" class="headerlink" title="答案"></a>答案</h3><p>2个引用类型比较看是不是同一个地址</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-28"><a href="#详细解析-28" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The equality operator (==) checks whether its two operands are equal, returning a Boolean result.</p>
</blockquote>
<p>If one of the operands is a boolean, it’ll convert the boolean operand to 1 if it is <code>true</code> and +0 if it is <code>false</code>. Other operands are also converted to Number and then compared. This also happens if operands are of different data types.</p>
<p>Also, remember the following -</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>([<span class="number">1</span>]) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">Number</span>([<span class="string">&#x27;0&#x27;</span>]) <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">true</span>) <span class="comment">// 1 </span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">false</span>) <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="comment">// primitive true</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) <span class="comment">// object true</span></span><br></pre></td></tr></table></figure>

<p>Also, If the operands are both objects, return true only if both operands reference the same object (remember Arrays are also objects)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">whenever an object and a primitive are equated then objects </span></span><br><span class="line"><span class="comment">are converted to primitive by calling their `toString` or `valueOf`</span></span><br><span class="line"><span class="comment">method. </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">if both point to different objects then they are not equal.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">`==` calls &#x27;toString&#x27; first, then `valueOf, whereas</span></span><br><span class="line"><span class="comment">inequlities like `&lt;` &amp; `&gt;`, calls &#x27;valueOf` first then `toString`</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="number">1</span>) <span class="comment">// ([1]).toSting()=== `1` =&gt; `1` == 1 =&gt; 1(here JS converted string in number) == 1 =&gt; true </span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == <span class="string">&#x27;1&#x27;</span>) <span class="comment">// same as above =&gt; 1 == 1 = true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;1&#x27;</span>] == <span class="string">&#x27;1&#x27;</span>) <span class="comment">// 1 == 1 = true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;1&#x27;</span>] == <span class="number">1</span>) <span class="comment">// 1 == 1 = true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>] == [<span class="string">&#x27;1&#x27;</span>]) <span class="comment">// false as both are arrays (not the same reference)</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="number">1</span>) <span class="comment">// (new Boolean(true)).toString() === &#x27;true&#x27; =&gt; 1 =&gt; 1 == 1 =&gt; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>)) <span class="comment">// false as both are actually objects</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&#x27;1&#x27;</span>) <span class="comment">// true == &#x27;1&#x27; = 1 == 1 = true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">false</span>) == [<span class="number">0</span>]) <span class="comment">// false == [0] = 0 == 0 = true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&#x27;1&#x27;</span>) <span class="comment">// object true == &#x27;1&#x27; = 1 == 1 = true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">false</span>) == [<span class="number">0</span>]) <span class="comment">// object fasle == [0] = // false as both are actually objects</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">null</span> == <span class="literal">undefined</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h2 id="31-Math"><a href="#31-Math" class="headerlink" title="31. Math"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Math">31. Math</a></h2><h3 id="题目-30"><a href="#题目-30" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(-<span class="number">1</span> / <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * -<span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> + <span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> - <span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> * (<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> / (<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="literal">Infinity</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> * <span class="literal">Infinity</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-30"><a href="#答案-30" class="headerlink" title="答案"></a>答案</h3><p>0/0 = NaN，正数/0=Infinity，负数/0=-Infinity，0<em>Infinity=NaN，正数\</em>Infinity=Infinity，负数*Infinity=-Infinity</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">Infinity</span><br><span class="line">NaN</span><br><span class="line">-Infinity</span><br><span class="line">NaN</span><br><span class="line">Infinity</span><br><span class="line">-Infinity</span><br><span class="line">Infinity</span><br><span class="line">NaN</span><br><span class="line">Infinity</span><br><span class="line">NaN</span><br><span class="line">0</span><br><span class="line">NaN</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-29"><a href="#详细解析-29" class="headerlink" title="详细解析"></a>详细解析</h3><p>If we know how <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Precedence</a> works this becomes much easy to understand.</p>
<p>Note that, if two operators have same precedence (ex. * and /) its evaluated from left to right</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Normal maths limit rules are appliation. In math, for four conditions limit </span></span><br><span class="line"><span class="comment">doesn&#x27;t exist</span></span><br><span class="line"><span class="comment"> - 0 * Infinity</span></span><br><span class="line"><span class="comment"> - 0 / 0</span></span><br><span class="line"><span class="comment"> - Infinity - Infinity</span></span><br><span class="line"><span class="comment"> - Infinity / Infinity</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> wherever limit doesn&#x27;t exist JS returns `NaN`.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span>) <span class="comment">// Infinity </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="number">0</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(-<span class="number">1</span> / <span class="number">0</span>) <span class="comment">// -Infinity</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">0</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="comment">// Infinity * 0 = NaN</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>) <span class="comment">// Infinity</span></span><br><span class="line"><span class="comment">// Infinity * 1 = Infinity</span></span><br><span class="line"> </span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * -<span class="number">1</span>) <span class="comment">// -Infinity</span></span><br><span class="line"><span class="comment">// Infinity * -1 = -Infinity</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> + <span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>) <span class="comment">// Infinity</span></span><br><span class="line"><span class="comment">// Infinity * 1 + Infinity * 1</span></span><br><span class="line"><span class="comment">// Infinity + Infinity = Infinity</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> - <span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="comment">// Infinity * 1 - Infinity *1</span></span><br><span class="line"><span class="comment">// Infinity - Infinity = NaN</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> * (<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>)) <span class="comment">// Infinity</span></span><br><span class="line"><span class="comment">// Infinity * 1 * (Infinity * 1)</span></span><br><span class="line"><span class="comment">// Infinity * Infinity = Infinity </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span> / (<span class="number">1</span> / <span class="number">0</span> * <span class="number">1</span>)) <span class="comment">// NaN</span></span><br><span class="line"><span class="comment">// Infinity * 1 / (Infinity * 1)</span></span><br><span class="line"><span class="comment">// Infinity / Infinity = NaM</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> / <span class="literal">Infinity</span>) <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> * <span class="literal">Infinity</span>) <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>



<h2 id="32-Hoisting-IIII"><a href="#32-Hoisting-IIII" class="headerlink" title="32. Hoisting IIII"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-IIII">32. Hoisting IIII</a></h2><h3 id="题目-31"><a href="#题目-31" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line">b = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> b)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> c)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> d = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  d = <span class="string">&#x27;2&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> e = <span class="number">1</span></span><br><span class="line"><span class="keyword">const</span> f = <span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> e)</span><br></pre></td></tr></table></figure>

<h3 id="答案-31"><a href="#答案-31" class="headerlink" title="答案"></a>答案</h3><p>先提升var声明，再提升函数声明</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="string">&quot;string&quot;</span></span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br><span class="line"><span class="string">&quot;number&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-30"><a href="#详细解析-30" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code.</p>
<p>In this example, imagine all the function declarations moved to the top prior to the execution of code. So, all the initializations of <code>a</code>, <code>b</code>, and <code>c</code> to 1 happen after they are declared(or functions are declared). Hence, <code>typeof</code> returns <code>&quot;number&quot;</code></p>
<p>Then we have an <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a> within which <code>d=&#39;2&#39;</code> hence typeof inside the function prints <code>&quot;string&quot;</code>. However, after IIFE is executed the scope gets destroyed and hence after that it logs <code>&quot;number&quot;</code> as <code>d</code> is 1</p>
<p>Lastly, <code>e</code> is a named function expression but this name is then local only to the function body (scope). Thus, outside the expression body <code>e</code> is still 1 i.e. <code>&quot;number&quot;</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// function declaration is hoisted</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line">b = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// function declaration is hoisted</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> b)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> c)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> d = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="comment">// declar an variable without &#x27;var, let, const&#x27; operators will make it become global variable</span></span><br><span class="line">  d = <span class="string">&#x27;2&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line"><span class="comment">// function declaration is hoisted to the top of the function scope</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="comment">// the same as:</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  &#125;</span><br><span class="line">  d = <span class="string">&#x27;2&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="comment">// the trick is that if function d() is removed, the d is changed to string </span></span><br><span class="line"><span class="comment">// We know variables declared in function will be destoried when function exists.</span></span><br><span class="line"><span class="comment">// As I said above, function d() is hoisted to the top of its function scope,</span></span><br><span class="line"><span class="comment">// which make the &#x27;d&#x27; become local variable instead of global variable,</span></span><br><span class="line"><span class="comment">// so global &#x27;d&#x27; has never been re-defined.</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> d)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> e = <span class="number">1</span></span><br><span class="line"><span class="keyword">const</span> f = <span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// none of function expression&#x27;s business</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> e)</span><br></pre></td></tr></table></figure>



<h2 id="33-this-II"><a href="#33-this-II" class="headerlink" title="33. this II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/this-II">33. <code>this</code> II</a></h2><h3 id="题目-32"><a href="#题目-32" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<p>ref: <a target="_blank" rel="noopener" href="https://javascript.info/reference-type">https://javascript.info/reference-type</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  <span class="function"><span class="title">b</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.a</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.b())</span><br><span class="line"><span class="built_in">console</span>.log((<span class="literal">true</span> ? obj.b : a)())</span><br><span class="line"><span class="built_in">console</span>.log((<span class="literal">true</span>, obj.b)())</span><br><span class="line"><span class="built_in">console</span>.log((<span class="number">3</span>, obj[<span class="string">&#x27;b&#x27;</span>])())</span><br><span class="line"><span class="built_in">console</span>.log((obj.b)())</span><br><span class="line"><span class="built_in">console</span>.log((obj.c = obj.b)())</span><br></pre></td></tr></table></figure>

<h3 id="答案-32"><a href="#答案-32" class="headerlink" title="答案"></a>答案</h3><p>只有直接调用或IIFE保存this.a才能为1</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">1</span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-31"><a href="#详细解析-31" class="headerlink" title="详细解析"></a>详细解析</h3><p>Things to know-</p>
<ul>
<li>In Normal Functions, the value of <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#function_context">this</a> is determined by how a function is called i.e. runtime binding.</li>
<li>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">comma operator</a> (,) evaluates each of its operands (from left to right) and returns the value of the last operand</li>
<li>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">ternary operator</a> takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.</li>
<li>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment">assignment operator</a> returns the value of the object specified by the left operand after the assignment</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - obj =&gt; undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `obj` point to object: `&#123; a: 1, b: fn() &#125;` . Here `b` is pointing to yer another</span></span><br><span class="line"><span class="comment">    object `fn===function()&#123; return this.a;&#125;`</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  <span class="function"><span class="title">b</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.a;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">`obj.b Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">  - this -&gt; point to `obj===&#123; a: 1, b: fn() &#125;`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - obj =&gt; undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - returns this.a===1</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Finally, `obj.b Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.b());</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">since it is `true` we get `obj.b`. It is like</span></span><br><span class="line"><span class="comment">const x = obj.b, then</span></span><br><span class="line"><span class="comment">x() ; here `x` will execute in global context and `this` points to window.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">`x` Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">  - this -&gt; window</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - obj =&gt; undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - returns this.a===undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Finally, `x` Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log((<span class="literal">true</span> ? obj.b : a)());</span><br><span class="line"><span class="comment">/* Same as last example */</span></span><br><span class="line"><span class="built_in">console</span>.log((<span class="literal">true</span>, obj.b)());</span><br><span class="line"><span class="comment">/* same as last example */</span></span><br><span class="line"><span class="built_in">console</span>.log((<span class="number">3</span>, obj[<span class="string">&quot;b&quot;</span>])());</span><br><span class="line"><span class="comment">/* same as 1st example */</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.b());</span><br><span class="line"><span class="comment">/* same as undefined examples */</span></span><br><span class="line"><span class="built_in">console</span>.log((obj.c = obj.b)());</span><br></pre></td></tr></table></figure>

<p><code>1.</code> When <code>b</code> is called as a method of <code>obj</code>, it’s <code>this</code> is set to the object the method is called on (i.e. <code>obj</code> object). Hence , <code>this.a</code> is 1</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">  * 1</span></span><br><span class="line"><span class="comment">  * undefined =&gt; conditional operator return value &lt;-- f b()&#123;return this.a&#125;  --&gt;, context is lost.</span></span><br><span class="line"><span class="comment">  * undefined =&gt; comma operator return value &lt;-- f b()&#123;return this.a&#125;  --&gt;, context is lost.</span></span><br><span class="line"><span class="comment">  * undefined =&gt; comma operator return value &lt;-- f b()&#123;return this.a&#125;  --&gt;, context is lost. array is cobverted to dtring</span></span><br><span class="line"><span class="comment">  * 1         =&gt; grouping operator, returns Reference </span></span><br><span class="line"><span class="comment">  * undefined =&gt; assingment opertaor return value  &lt;-- f b()&#123;return this.a&#125;  --&gt;, context is lost.</span></span><br><span class="line"><span class="comment">  */</span></span><br></pre></td></tr></table></figure>



<h2 id="34-precedence"><a href="#34-precedence" class="headerlink" title="34. precedence"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/precedence">34. precedence</a></h2><h3 id="题目-33"><a href="#题目-33" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(a +++ a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(b + + + b)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(c --- c)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(d - - - d)</span><br></pre></td></tr></table></figure>

<h3 id="答案-33"><a href="#答案-33" class="headerlink" title="答案"></a>答案</h3><p>优先执行单目运算符，执行结束后a=2, b=1, c=0, d=1</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">3</span><br><span class="line">2</span><br><span class="line">1</span><br><span class="line">0</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-32"><a href="#详细解析-32" class="headerlink" title="详细解析"></a>详细解析</h3><p>Whenever three unary operators are placed one after another it actually becomes a post-increment/decrement operator followed by another operator <a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Maximal_munch">See Reason</a></p>
<p>But, if there are spaces between the operators, it actually means multiple unary operators one after another</p>
<p>Basically,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">a +++ a <span class="comment">// is same as (a++ + a)</span></span><br><span class="line">a + + + a <span class="comment">// is same as (a +  +(+a)) = a + a</span></span><br></pre></td></tr></table></figure>

<p>Also, remember If used <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">postfix</a>, with operator after operand (for example, x++), the increment operator increments and returns the value before incrementing.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(a +++ a) <span class="comment">// 3</span></span><br><span class="line"><span class="comment">// (a++  + a) = 1 + 2 = 3 (Note that a after + gets incremented)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(b + + + b) <span class="comment">// 2</span></span><br><span class="line"><span class="comment">// (1 + +(+1)) = (1 + +1) = 1 + 1 = 2</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(c --- c) <span class="comment">// 1</span></span><br><span class="line"><span class="comment">// (c--  - c) = 1 - 0 = 1 (Note that c after - gets decremented)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(d - - - d) <span class="comment">// 0</span></span><br><span class="line"><span class="comment">// (1 - -(-1)) = (1 - 1) = 0</span></span><br></pre></td></tr></table></figure>



<h2 id="35-Implicit-Coercion-III"><a href="#35-Implicit-Coercion-III" class="headerlink" title="35. Implicit Coercion III"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Implicit-Conversion-III">35. Implicit Coercion III</a></h2><h3 id="题目-34"><a href="#题目-34" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log( [] + &#123;&#125; )</span><br><span class="line"><span class="built_in">console</span>.log( + &#123;&#125; )</span><br><span class="line"><span class="built_in">console</span>.log( + [] )</span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; + [])</span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + [])</span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + [])</span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + [])</span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + [])</span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + [] + &#123;&#125; )</span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + [] + &#123;&#125;  + [])</span><br></pre></td></tr></table></figure>

<h3 id="答案-34"><a href="#答案-34" class="headerlink" title="答案"></a>答案</h3><p>优先执行单目运算符，执行结束后a=2, b=1, c=0, d=1</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line">NaN</span><br><span class="line">0</span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]0&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]0[object Object]&quot;</span></span><br><span class="line"><span class="string">&quot;[object Object]0[object Object]&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-33"><a href="#详细解析-33" class="headerlink" title="详细解析"></a>详细解析</h3><p>In mathematical operators, <code>+</code> works on both numbers and strings (used in string concatenation). Hence, if any of the operands is not a number, using <code>+</code> converts all operand/s to string and concatenates.</p>
<blockquote>
<p>The unary plus operator (+) precedes its operand and attempts to convert it into a number if it isn’t already.</p>
</blockquote>
<p>Also, unary operators have higher precedence over addition/concatenation</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table</a></p>
<p>Let’s know a few things first-</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">+ <span class="string">&quot;1&quot;</span> <span class="comment">// converts into number 1</span></span><br><span class="line">+ &#123;&#125; <span class="comment">// NaN</span></span><br><span class="line">+ [] <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line">(&#123;&#125;).toString() <span class="comment">// &quot;[object Object]&quot;</span></span><br><span class="line">[].toString() <span class="comment">// &quot;&quot;</span></span><br></pre></td></tr></table></figure>

<p>Breaking it down line by line—</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">When two objects are added then they are converted to primitives using `toString()`</span></span><br><span class="line"><span class="comment">and `valueOf()` methods.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">(&#123;&#125;).toString() =&gt; &#x27;[object Object]&#x27;</span></span><br><span class="line"><span class="comment">([]).toString() =&gt; &#x27;&#x27;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( [] + &#123;&#125; ) <span class="comment">// &quot;&quot; + &quot;[object Object]&quot; = &quot;[object Object]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( + &#123;&#125; ) <span class="comment">// `+` converts to number thus Number([object Object]) === NaN</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( + [] ) <span class="comment">// Number(&#x27;&#x27;) === 0</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; + []) <span class="comment">// &quot;[object Object]&quot; + &quot;&quot; = &quot;[object Object]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + []) <span class="comment">// &quot;[object Object]&quot; + &quot;&quot; = &quot;[object Object]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + []) <span class="comment">// &quot;[object Object]&quot; + &quot;&quot; = &quot;[object Object]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( (&#123;&#125;) + []) <span class="comment">// &quot;[object Object]&quot; + &quot;&quot; = &quot;[object Object]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + []) <span class="comment">// &quot;[object Object]&quot; + &quot;0&quot; = &quot;[object Object]0&quot;</span></span><br><span class="line"><span class="comment">// think of it as console.log(&#123;&#125; + (+[]))</span></span><br><span class="line"><span class="comment">// unary operator performs first which means it is now console.log(&#123;&#125; + 0)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + [] + &#123;&#125; ) <span class="comment">//  &quot;[object Object]&quot; + &quot;0&quot; + &quot;[object Object]&quot; = &quot;[object Object]0[object Object]&quot;</span></span><br><span class="line"><span class="comment">// think of it as console.log(&#123;&#125; + (+[]) + &#123;&#125;)</span></span><br><span class="line"><span class="comment">// unary operator performs first which means it is now console.log(&#123;&#125; + 0 + &#123;&#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( &#123;&#125; +  + [] + &#123;&#125;  + []) <span class="comment">//  &quot;[object Object]&quot; + &quot;0&quot; + &quot;[object Object]&quot; + &quot;&quot; = &quot;[object Object]0[object Object]&quot;</span></span><br><span class="line"><span class="comment">// think of it as console.log(&#123;&#125; + (+[]) + &#123;&#125; + [])</span></span><br><span class="line"><span class="comment">// unary operator performs first which means it is now console.log(&#123;&#125; + 0 + &#123;&#125; + [])</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus</a></p>
<h2 id="36-Promise-prototype-finally"><a href="#36-Promise-prototype-finally" class="headerlink" title="36. Promise.prototype.finally()"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Promise-prototype-finally">36. Promise.prototype.finally()</a></h2><h3 id="题目-35"><a href="#题目-35" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">.finally(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;error&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line">.catch(<span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(error)</span><br><span class="line">  <span class="keyword">throw</span> <span class="string">&#x27;error2&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">.finally(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data)</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="number">2</span>).then(<span class="built_in">console</span>.log)</span><br><span class="line">&#125;)</span><br><span class="line">.then(<span class="built_in">console</span>.log)</span><br><span class="line">.catch(<span class="built_in">console</span>.log)</span><br></pre></td></tr></table></figure>

<h3 id="答案-35"><a href="#答案-35" class="headerlink" title="答案"></a>答案</h3><p>finally不接收参数</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">undefined</span><br><span class="line"><span class="string">&quot;error&quot;</span></span><br><span class="line">undefined</span><br><span class="line">2</span><br><span class="line"><span class="string">&quot;error2&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-34"><a href="#详细解析-34" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here, Promise resolves with the value 1 and control goes to the first finally block. A <code>finally</code> callback will not receive any argument hence it logs <code>undefined</code> and it returns a rejected promise.</p>
<p>Next control goes to the first catch block and “error” parameter is passed to it. It throws another error “error2” and control goes to the chained finally. Again, no argument is passed to finally so it logs <code>undefined</code></p>
<p>This <code>finally</code> returns a resolved promise that logs <code>2</code>.</p>
<p>Lastly, the previously thrown <code>error2</code> is catched and logs <code>error2</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Promise is resolved immeditely, then </span></span><br><span class="line"><span class="comment">finally handler is queued to `microtask queue` */</span></span><br><span class="line"><span class="built_in">Promise</span>.resolve(<span class="number">1</span>)</span><br><span class="line">  <span class="comment">/* This finally handler is dequeued and executed. Since finally receives</span></span><br><span class="line"><span class="comment">no arguments thus `data===undefined` */</span></span><br><span class="line">.finally(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123; </span><br><span class="line">  <span class="built_in">console</span>.log(data) <span class="comment">// undefined because .finally() does not receive any argument</span></span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;error&#x27;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">/* after return from finally handler, catch error handler is queued to</span></span><br><span class="line"><span class="comment">  &#x27;microtask queue&#x27;. Thus, it is dequeued and executed. It receives `error` </span></span><br><span class="line"><span class="comment">  as argument from previous reject and prints `error`. Finally it throw an error */</span></span><br><span class="line">.catch(<span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(error) <span class="comment">// &quot;error&quot; from the rejected promise in previous .finally()</span></span><br><span class="line">  <span class="keyword">throw</span> <span class="string">&#x27;error2&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">/* it is queued to microtask queue after execution completion of last catch </span></span><br><span class="line"><span class="comment">  error handler. Then it is dequeued, and executed. Since finally doesn&#x27;t receive</span></span><br><span class="line"><span class="comment">  any argument thus `data===undefined`. It prints `undefined`. */</span></span><br><span class="line">.finally(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data) <span class="comment">// undefined because .finally() does not receive any argument</span></span><br><span class="line">  <span class="comment">/* Promise is resolved instantnially. Then `console.log` queued and dequeued </span></span><br><span class="line"><span class="comment">    from microtask queue. Print `2`. This function returns `undefined. */</span></span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="number">2</span>).then(<span class="built_in">console</span>.log) <span class="comment">// 2</span></span><br><span class="line">&#125;)</span><br><span class="line">  <span class="comment">/* it is skipped because there was rejected promise before finally */</span></span><br><span class="line">.then(<span class="built_in">console</span>.log) <span class="comment">// ignored</span></span><br><span class="line">  <span class="comment">/* rejected promise is printed i.e. `error2` */</span></span><br><span class="line">.catch(<span class="built_in">console</span>.log) <span class="comment">// &quot;error2&quot; from previous .catch()</span></span><br></pre></td></tr></table></figure>



<h2 id="37-push-unshift"><a href="#37-push-unshift" class="headerlink" title="37. push unshift"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/push-unshift">37. push unshift</a></h2><h3 id="题目-36"><a href="#题目-36" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>]</span><br><span class="line">arr.push(<span class="number">3</span>,<span class="number">4</span>)</span><br><span class="line">arr.unshift(<span class="number">5</span>,<span class="number">6</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr)</span><br></pre></td></tr></table></figure>

<h3 id="答案-36"><a href="#答案-36" class="headerlink" title="答案"></a>答案</h3><p>多个数/数组push/unshift按照顺序插入</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[5,6,1,2,3,4]</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-35"><a href="#详细解析-35" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The <code>push()</code> method adds one or more elements to the end of an array</p>
</blockquote>
<blockquote>
<p>The <code>unshift()</code> method inserts one or more values to the beginning of an array.</p>
</blockquote>
<p>The important thing to note is that, if multiple elements are passed as parameters, they’re inserted as a chunk at the beginning, in the exact same order they were passed as parameters. This is different than adding it one by one.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - arr =&gt; undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `arr` points to a object `[1,2]`</span></span><br><span class="line"><span class="comment"> */</span> </span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="comment">// two more elements insert in object that is pointed by `arr`</span></span><br><span class="line">arr.push(<span class="number">3</span>, <span class="number">4</span>);</span><br><span class="line"><span class="comment">// two more elements insert in object that is pointed by `arr`</span></span><br><span class="line">arr.unshift(<span class="number">5</span>, <span class="number">6</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure>



<h2 id="38-Hoisting-IV"><a href="#38-Hoisting-IV" class="headerlink" title="38. Hoisting IV"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-IV">38. Hoisting IV</a></h2><h3 id="题目-37"><a href="#题目-37" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = <span class="number">10</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(foo)</span><br><span class="line">    <span class="keyword">var</span> foo = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line">func1 ()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(foo)</span><br><span class="line">    <span class="keyword">let</span> foo = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line">func2 ()</span><br></pre></td></tr></table></figure>

<h3 id="答案-37"><a href="#答案-37" class="headerlink" title="答案"></a>答案</h3><p>var提前声明，let块状作用域</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">undefined</span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-36"><a href="#详细解析-36" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code.</p>
<p>The default initialization of the <code>var</code> is <code>undefined</code>. A variable declared with <code>let</code> is also hoisted but, unlike <code>var</code>, its not initialized with a default value. An exception will be thrown if we try to read before it is initialized.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window: global object</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - foo = undefined</span></span><br><span class="line"><span class="comment">  - func1 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment">  - func2 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `foo` is assigned `10` </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">let</span> foo = <span class="number">10</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo);</span><br><span class="line">  <span class="keyword">var</span> foo = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">`func1 Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">    - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">    - this: points to `window`</span></span><br><span class="line"><span class="comment">    - foo: undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    - window: global object</span></span><br><span class="line"><span class="comment">    - this =&gt; window</span></span><br><span class="line"><span class="comment">    - foo = undefined</span></span><br><span class="line"><span class="comment">    - func1 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment">    - func2 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">    - `foo` is assigned `1` </span></span><br><span class="line"><span class="comment">    - return undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Finally, `func1 Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">func1();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo);</span><br><span class="line">  <span class="keyword">let</span> foo = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">`func2 Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">    - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">    - this: points to `window`</span></span><br><span class="line"><span class="comment">    - foo: undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    - window: global object</span></span><br><span class="line"><span class="comment">    - this =&gt; window</span></span><br><span class="line"><span class="comment">    - foo = undefined</span></span><br><span class="line"><span class="comment">    - func1 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment">    - func2 =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">    - ReferenceError: foo is not defined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Finally, `func2 Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">func2();</span><br></pre></td></tr></table></figure>



<h2 id="39-var"><a href="#39-var" class="headerlink" title="39. var"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/var">39. var</a></h2><h3 id="题目-38"><a href="#题目-38" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i)</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>

<h3 id="答案-38"><a href="#答案-38" class="headerlink" title="答案"></a>答案</h3><p>var提前声明</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">undefined</span><br><span class="line">0</span><br><span class="line">1</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-37"><a href="#详细解析-37" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - foo =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i); <span class="comment">// i gets hoisted but value not assigned therefore it returns undefined</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i); <span class="comment">// 0 1 2</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">`foo Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">  - this: points to `window`</span></span><br><span class="line"><span class="comment">  - &#x27;i&#x27;=== undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">  - foo =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `i` will change from 0 to 3</span></span><br><span class="line"><span class="comment">  - returns undefined</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Finally, `foo Execution Context` is destroyed. </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">foo();</span><br></pre></td></tr></table></figure>



<h2 id="40-RegExp-prototype-test"><a href="#40-RegExp-prototype-test" class="headerlink" title="40. RegExp.prototype.test"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/RegExp-prototype-test">40. RegExp.prototype.test</a></h2><h3 id="题目-39"><a href="#题目-39" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test(<span class="string">&#x27;404&#x27;</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test(<span class="number">404</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test([<span class="string">&#x27;404&#x27;</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test([<span class="number">404</span>]))</span><br></pre></td></tr></table></figure>

<h3 id="答案-39"><a href="#答案-39" class="headerlink" title="答案"></a>答案</h3><p>测试数据会转化为 字符串加入判断</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-38"><a href="#详细解析-38" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test(<span class="string">&#x27;404&#x27;</span>)) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test(<span class="number">404</span>)) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test([<span class="string">&#x27;404&#x27;</span>])) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/^4\d\d$/</span>.test([<span class="number">404</span>])) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p>The <code>test()</code> method expects a <code>string</code> as input, against which to match the regular expression.</p>
<p>So, if the input is not a string it simply converts the input to a string and then matches with regex.</p>
<p><code>^4\d\d$</code> 👉🏻 Starts with 4 followed by exactly one digit and ending with another digit</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;404&quot;</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">404.</span>toString() <span class="comment">// &quot;404&quot; true</span></span><br><span class="line">[<span class="string">&quot;404&quot;</span>].toString() <span class="comment">// &quot;404&quot; true</span></span><br><span class="line">[<span class="number">404</span>].toString() <span class="comment">// &quot;404&quot; true</span></span><br></pre></td></tr></table></figure>



<h2 id="41-this-III"><a href="#41-this-III" class="headerlink" title="41. this III"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/this-III">41. <code>this</code> III</a></h2><h3 id="题目-40"><a href="#题目-40" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  b: <span class="built_in">this</span>.a + <span class="number">1</span>,</span><br><span class="line">  c: <span class="function">() =&gt;</span> <span class="built_in">this</span>.a + <span class="number">1</span>,</span><br><span class="line">  <span class="function"><span class="title">d</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.a + <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">e</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="function">() =&gt;</span> <span class="built_in">this</span>.a + <span class="number">1</span>)()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.b)</span><br><span class="line"><span class="built_in">console</span>.log(obj.c())</span><br><span class="line"><span class="built_in">console</span>.log(obj.d())</span><br><span class="line"><span class="built_in">console</span>.log(obj.e())</span><br></pre></td></tr></table></figure>

<h3 id="答案-40"><a href="#答案-40" class="headerlink" title="答案"></a>答案</h3><p>obj.b不是函数相当于window.a + 1，箭头函数this指向非箭头函数的外层作用域</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">NaN</span><br><span class="line">NaN</span><br><span class="line">2</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-39"><a href="#详细解析-39" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p><code>Normal Function</code> — the value of this is determined by how a function is called i.e. runtime binding.</p>
</blockquote>
<blockquote>
<p><code>Arrow Function</code> — don’t provide their own this binding; it retains the <code>this</code> value of the enclosing lexical context i.e. static binding.</p>
</blockquote>
<p>Also, In Javascript, only function calls establish a new <code>this</code> context. An object literal constructor is not a method call, so it does not affect this in any way; it will still refer to whatever it was referring to outside of the object literal.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - obj =&gt; undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `obj` points to `&#123; a: 1, b: NaN, c: fn(), d: fn(), e: fn() &#125;`. </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  a: <span class="number">1</span>,</span><br><span class="line">  <span class="comment">/*  `this` is created in two times</span></span><br><span class="line"><span class="comment">          - globalthis</span></span><br><span class="line"><span class="comment">          - in methods defined with normal function where `this` in scope chain refers object on which </span></span><br><span class="line"><span class="comment">            method is called. </span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  b: <span class="built_in">this</span>.a + <span class="number">1</span>,</span><br><span class="line">  c: <span class="function">() =&gt;</span> <span class="built_in">this</span>.a + <span class="number">1</span>,</span><br><span class="line">  <span class="function"><span class="title">d</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.a + <span class="number">1</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">e</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="function">() =&gt;</span> <span class="built_in">this</span>.a + <span class="number">1</span>)();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> f = <span class="function">(<span class="params">g</span>) =&gt;</span> g;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Here `this` refers to `globleThis`. It doesn&#x27;t have `a`, thus </span></span><br><span class="line"><span class="comment">  `this.a===undefined`. When `undefined` is added to `1`, then is converted to</span></span><br><span class="line"><span class="comment">  `number` as `Number(undefined)` =&gt; NaN, and `NaN+1===NaN`</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.b);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Since the arrow function doesn&#x27;t update `this` in their scope chain with</span></span><br><span class="line"><span class="comment">an object on which it is invoked Thus here `this` refers to `globalThis`. Same as</span></span><br><span class="line"><span class="comment">the previous `console.log`, we will get `NaN */</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.c());</span><br><span class="line"></span><br><span class="line"><span class="comment">/* `d` method is defined with normal function. It will update its `this` with</span></span><br><span class="line"><span class="comment">object on which it is invoked which is here `obj`. Thus it returns `1+1===2` */</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.d());</span><br><span class="line"></span><br><span class="line"><span class="comment">/* As talked earllier only global and functions create new execution environement</span></span><br><span class="line"><span class="comment">and so new `this`. `e()` created new execution environment and refer `obj` and `this`.</span></span><br><span class="line"><span class="comment">Arrow use this and return `1+1===2` */</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.e());</span><br></pre></td></tr></table></figure>



<h2 id="42-Hoisting-V"><a href="#42-Hoisting-V" class="headerlink" title="42. Hoisting V"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/hoisting-v">42. Hoisting V</a></h2><h3 id="题目-41"><a href="#题目-41" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (!fn) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn()</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// another one</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (!fn1) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn1()</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// another one !</span></span><br><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn3</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn3()</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<h3 id="答案-41"><a href="#答案-41" class="headerlink" title="答案"></a>答案</h3><p>有判断函数声明内部判断逻辑会提升，将函数定义为undefined</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;2&quot;</span></span><br><span class="line"><span class="string">&quot;4&quot;</span></span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-40"><a href="#详细解析-40" class="headerlink" title="详细解析"></a>详细解析</h3><p>We are using <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a> here to execute functions.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code. The default initialization of the var is undefined.</p>
<p><code>fn</code> is a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function#conditionally_created_functions">Conditionally Created Function</a> whose behavior differs across browsers. In chrome, <code>fn</code> gets hoisted but since its <code>undefined</code> the <code>if</code> evaluates to <code>true</code> adn <code>fn()</code> gets defined printing <code>&quot;2&quot;</code> later</p>
<p><code>fn1</code> is declared twice (both outside and inside IIFE). However, inside the IIFE because of Hoisting <code>fn1</code> is actually <code>undefined</code> hence <code>if</code> evaluates to true and <code>fn1</code> gets redeclared 👉🏻 prints <code>&quot;4&quot; fn3</code> gets hoisted too, however the difference is this time <code>if</code> is using <code>false</code> so it never gets inside it and <code>fn3</code> remains undefined. Executing <code>fn3()</code> thus throws `Uncaught TypeError: fn3 is not a function</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// var fn;  Because of Hoisting</span></span><br><span class="line">  <span class="keyword">if</span> (!fn) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;2&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn()</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// another one</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;3&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// var fn1; Because of Hoisting</span></span><br><span class="line">  <span class="keyword">if</span> (!fn1) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;4&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn1()</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// another one!</span></span><br><span class="line">(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// var fn3; Because of Hoisting</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn3</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  fn3()</span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="comment">// &quot;2&quot;</span></span><br><span class="line"><span class="comment">// &quot;4&quot;</span></span><br><span class="line"><span class="comment">// Error</span></span><br></pre></td></tr></table></figure>

<p>for more details: <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6">https://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6</a></p>
<h2 id="43-JSON-stringify"><a href="#43-JSON-stringify" class="headerlink" title="43. JSON.stringify()"></a>43. JSON.stringify()</h2><h3 id="题目-42"><a href="#题目-42" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<blockquote>
<p>Please refer to the format guide for cases like quotes in quotes</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="string">&#x27;false&#x27;</span>, <span class="literal">false</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="literal">NaN</span>, <span class="literal">null</span>, <span class="literal">Infinity</span>, <span class="literal">undefined</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify(&#123;<span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="literal">NaN</span>, <span class="attr">c</span>: <span class="literal">undefined</span>&#125;))</span><br></pre></td></tr></table></figure>

<h3 id="答案-42"><a href="#答案-42" class="headerlink" title="答案"></a>答案</h3><p>JSON.stringify()能区分string、bool和number类型，但无法区分NaN, null, Infinity和undefined，并且undefined用作对象的值会消失</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;[&quot;</span><span class="literal">false</span><span class="string">&quot;,false]&quot;</span></span><br><span class="line"><span class="string">&quot;[null,null,null,null]&quot;</span></span><br><span class="line"><span class="string">&quot;&#123;&quot;</span>a<span class="string">&quot;:null,&quot;</span>b<span class="string">&quot;:null&#125;&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-41"><a href="#详细解析-41" class="headerlink" title="详细解析"></a>详细解析</h3><p><code>JSON.stringify()</code> method converts a JavaScript object or value to a JSON string following these rules-</p>
<ol>
<li><code>Boolean</code>, <code>Number</code>, and <code>String</code> are converted to the corresponding primitive values during stringification</li>
<li><code>undefined</code> is not a valid JSON value. Such values encountered during conversion are either omitted (in an object) or changed to <code>null</code> ( in an array)</li>
<li><code>Infinity</code>, <code>NaN</code>, as well as the value <code>null</code>, are all considered <code>null</code></li>
</ol>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*  In Array &amp; Objects, stringify make `NaN, Infinity, undefined` =&gt; &#x27;null&#x27;. Then wrap</span></span><br><span class="line"><span class="comment">it in string and return.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">In object, it removes keys which has `undefined` value</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// both primitives remain as it is</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="string">&#x27;false&#x27;</span>, <span class="literal">false</span>])) <span class="comment">// &quot;[&quot;false&quot;,false]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// in an array these values are converted to null</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify([<span class="literal">NaN</span>, <span class="literal">null</span>, <span class="literal">Infinity</span>, <span class="literal">undefined</span>])) <span class="comment">// &quot;[null,null,null,null]&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// in an object, undefined keys are omitted, while NaN gets converted to null</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify(&#123;<span class="attr">a</span>: <span class="literal">null</span>, <span class="attr">b</span>: <span class="literal">NaN</span>, <span class="attr">c</span>: <span class="literal">undefined</span>&#125;)) <span class="comment">// &quot;&#123;&quot;a&quot;:null,&quot;b&quot;:null&#125;&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="44-Function-call"><a href="#44-Function-call" class="headerlink" title="44. Function call"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Function-call">44. Function call</a></h2><h3 id="题目-43"><a href="#题目-43" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    a: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">      <span class="keyword">return</span> a()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">a().a()</span><br></pre></td></tr></table></figure>

<h3 id="答案-43"><a href="#答案-43" class="headerlink" title="答案"></a>答案</h3><p>先执行外面的函数a()，打印1，再执行返回的函数，打印2，最后再次执行外面的函数a()，打印1</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-42"><a href="#详细解析-42" class="headerlink" title="详细解析"></a>详细解析</h3><p>In this example, when we call the outer function, it prints 1 and then returns an object with another function a. By calling it like <code>a().a()</code> we invoke the <code>a</code> method of this returned object too. That’s why it prints 2.</p>
<p>On the last line, when we write <code>return a()</code>, its actually a function invocation of outer function <code>a</code>. Hence, it prints 1 again</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - `a` =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts and it continue till end of script.</span></span><br><span class="line"><span class="comment">when script stops executing, then only it will be destroyed.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">kaka</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>); <span class="comment">// 1</span></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    kaka: <span class="function"><span class="keyword">function</span> <span class="title">huha</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">      <span class="keyword">return</span> kaka();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* `kaka Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">      - this: points to `window`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - `Kaka` =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - it returns an object which has property named `kaka` which points to </span></span><br><span class="line"><span class="comment">        yet other callable object</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Here, `foo Execution Context` is not destroyed because of closure. It</span></span><br><span class="line"><span class="comment">    will destroy after execution of clouser destroyed.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> temp = kaka(); <span class="comment">// it will call `kaka` function =&gt; 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">temp = &#123;</span></span><br><span class="line"><span class="comment">    kaka: function () &#123;</span></span><br><span class="line"><span class="comment">      console.log(2); // 2 </span></span><br><span class="line"><span class="comment">      return kaka();</span></span><br><span class="line"><span class="comment">    &#125;,</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* `temp.kaka Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">      - this: points to return value of `temp` i.e. `&#123; a: f() &#125;`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">      - this: points to `window`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - `a` =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - it returns `a` and executes it.</span></span><br><span class="line"><span class="comment">      - `a Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">          - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">          - this: points to `window`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">          - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">          - this: points to return value of `temp` i.e. `&#123; a: f() &#125;`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">          - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">          - this: points to `window`</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">          - window</span></span><br><span class="line"><span class="comment">          - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">          - `a` =&gt; it points to an object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">          - it returns `kaka`. </span></span><br><span class="line"><span class="comment">          - This `kaka` is in global context and its `this===window`.</span></span><br><span class="line"><span class="comment">          - It will print 1 and return `temp` again.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, all `Execution Context` are destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> temp2 = temp.a();</span><br></pre></td></tr></table></figure>





<h2 id="45-Hoisting-VI"><a href="#45-Hoisting-VI" class="headerlink" title="45. Hoisting VI"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Hoisting-VI">45. Hoisting VI</a></h2><h3 id="题目-44"><a href="#题目-44" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo);</span><br><span class="line">  foo = <span class="number">2</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">window</span>.foo);</span><br><span class="line">  <span class="built_in">console</span>.log(foo);</span><br><span class="line">  <span class="keyword">var</span> foo = <span class="number">3</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(foo);</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">window</span>.foo)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<h3 id="答案-44"><a href="#答案-44" class="headerlink" title="答案"></a>答案</h3><p>注意IFEE内部变量和全局变量</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">undefined</span><br><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-43"><a href="#详细解析-43" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to execution of the code. JavaScript only hoists declarations, not initializations! The default initialization of the <code>var</code> is <code>undefined</code></p>
<p>Here, we have created a global variable <code>foo</code> that will also be available on <code>window</code>. Then we are executing an <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a> and in this function, a local <code>foo</code> is created.</p>
<p>Note that, this <code>foo</code> is different from <code>window.foo</code> as, <code>foo</code> will refer to the local variable while <code>window.foo</code> points to the outer variable <code>foo = 1</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - foo === undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `foo` is assigned `1`. </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> foo = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* This anonmous function&#x27;s `Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">      - this: points to `window`.</span></span><br><span class="line"><span class="comment">      - foo===undefined (because of hoisting)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - bar=1, foo=&gt;f(), a=&gt; &#123; bar: 10, foo1: fn(), foo2: fn() &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - `foo=2` statement will assign `foo` value `2`.</span></span><br><span class="line"><span class="comment">      - `var foo = 3` statement will assign `foo` value `3`.</span></span><br><span class="line"><span class="comment">      it returns `a.bar` and then increase it by one.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, `foo Execution Context` is destroyed.  */</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// &#x27;var foo = 3&#x27; is hoisted here -&gt; var foo = undefined</span></span><br><span class="line">  <span class="built_in">console</span>.log(foo); <span class="comment">// undefined - local variable</span></span><br><span class="line">  foo = <span class="number">2</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">window</span>.foo); <span class="comment">// 1 - window&#x27;s variable</span></span><br><span class="line">  <span class="built_in">console</span>.log(foo); <span class="comment">// 2 - local variable</span></span><br><span class="line">  <span class="keyword">var</span> foo = <span class="number">3</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(foo); <span class="comment">// 3 - local variable</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">window</span>.foo); <span class="comment">// 1 - window&#x27;s variable</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>



<h2 id="46-Implicit-Coercion-IV"><a href="#46-Implicit-Coercion-IV" class="headerlink" title="46. Implicit Coercion IV"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/implicit-coersion-2">46. Implicit Coercion IV</a></h2><h3 id="题目-45"><a href="#题目-45" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = [<span class="number">0</span>]</span><br><span class="line"><span class="keyword">if</span> (foo) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo == <span class="literal">true</span>)</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo == <span class="literal">false</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="答案-45"><a href="#答案-45" class="headerlink" title="答案"></a>答案</h3><p>[0]转化为bool为true，转化为字符为”0”</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-44"><a href="#详细解析-44" class="headerlink" title="详细解析"></a>详细解析</h3><p>In this example, <code>if(foo)</code> is trying to check if <code>[0]</code> is truthy or falsy.</p>
<p>Basically, if the value is or is <code>0</code>, <code>-0</code>, <code>null</code>, <code>false</code>, <code>NaN</code>, <code>undefined</code>, or <code>&quot;&quot;</code> its <code>falsy</code>. All other values, including any object, an empty array ([]), or the string “false” are <code>truthy</code></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean</a></p>
<p>That’s why it goes into the if <code>block</code>.</p>
<p>The way <code>==</code> works, If the operands are of different types, it’ll try to convert them to the same type before comparing. For example, here one of the operands is a boolean, and the other is a number so it’ll convert them to numbers and then compare.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>(<span class="literal">true</span>) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">Number</span>([<span class="number">0</span>]) <span class="comment">// 0</span></span><br><span class="line"><span class="comment">// 1 != 0 hence the answer is false</span></span><br></pre></td></tr></table></figure>

<p>so</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - foo === undefined,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `foo` points to an object `[0]`. </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> foo = [<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Falsy Value: </span></span><br><span class="line"><span class="comment">    - empty string: &quot;&quot;,&#x27;&#x27;,``</span></span><br><span class="line"><span class="comment">    - zero: 0, -0, +0</span></span><br><span class="line"><span class="comment">    - null, undefined, NaN, false</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Since `foo` is not a falsy value, thus we will land in the `if` block</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (foo) &#123;</span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">    1. When comparing with primitives, JS calls `toSting` and `valueOf` methods </span></span><br><span class="line"><span class="comment">    on objects</span></span><br><span class="line"><span class="comment">    2. ([]).toString() =&gt; &quot;&quot; i.e. empty string</span></span><br><span class="line"><span class="comment">    3. Since empty string (&quot;&quot;) is  primitive &amp; falsy, therefore it is converted to `false`</span></span><br><span class="line"><span class="comment">    4. Since, false != true, thus we get `false`</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">  <span class="built_in">console</span>.log(foo == <span class="literal">true</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(foo == <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="47-Promise-Order-II"><a href="#47-Promise-Order-II" class="headerlink" title="47. Promise Order II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/promise-order-II">47. Promise Order II</a></h2><h3 id="题目-46"><a href="#题目-46" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;, <span class="number">10</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">_, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">  reject(<span class="number">5</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>)</span><br><span class="line">&#125;).then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">7</span>))</span><br><span class="line">.catch(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">8</span>))</span><br><span class="line">.then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">9</span>))</span><br><span class="line">.catch(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">10</span>))</span><br><span class="line">.then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">11</span>))</span><br><span class="line">.then(<span class="built_in">console</span>.log)</span><br><span class="line">.finally(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">12</span>))</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">13</span>) </span><br></pre></td></tr></table></figure>

<h3 id="答案-46"><a href="#答案-46" class="headerlink" title="答案"></a>答案</h3><p>先同步再异步，异步中先微任务再宏任务</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">4</span><br><span class="line">6</span><br><span class="line">13</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">11</span><br><span class="line">undefined</span><br><span class="line">12</span><br><span class="line">3</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-45"><a href="#详细解析-45" class="headerlink" title="详细解析"></a>详细解析</h3><p>Key points to remember are-</p>
<ul>
<li>All synchronous code gets executed first</li>
<li>The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Basically, it’s a nonblocking block of code that executes when the call stack is empty</li>
<li>The executor is called synchronously by the Promise constructor before even the Promise constructor returns the created object</li>
<li><code>Promises</code> create <code>Microtask</code> which has priority over the <code>Macrotask</code> created by <code>setTimeout</code>.</li>
</ul>
<p>So all code execution can be explained in these steps-</p>
<ul>
<li><code>1</code> gets printed</li>
<li><code>3</code> and <code>2</code> get pushed to the Macrotask queue (remember 3 gets pushed before 2 because of less delay)</li>
<li><code>4</code> and <code>6</code> get printed next and the promise is queued to the Microtask queue</li>
<li><code>13</code> also gets printed being a synchronous code</li>
<li>Now since, the call stack is empty. Microtask queue is checked first and promise gets executed. Since it is rejected, it goes into catch block and <code>8</code> gets printed</li>
<li>Because of promise chaining as long as no error happens, all subsequent <code>then</code> get executed i.e. <code>9</code>, <code>11</code>, <code>undefined</code> and then <code>finally</code> gets invoked so <code>12</code> gets printed</li>
<li>Lastly, queued setTimeouts get executed i.e. 3 and 2 will get printed</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>); <span class="comment">// 1st =&gt; 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 10ms timer is initiated. It will insert callback function in</span></span><br><span class="line"><span class="comment"> `Task Queue` after 10ms. */</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>); <span class="comment">//11th =&gt; 2</span></span><br><span class="line">&#125;, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 0ms timer is initiated. It will insert callback function in</span></span><br><span class="line"><span class="comment"> `Task Queue` after 0ms. */</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>); <span class="comment">// 10th =&gt; 3</span></span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* `executor` function of this promise is immediately executed by placing </span></span><br><span class="line"><span class="comment">it in `call stack` */</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">_, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>); <span class="comment">// 2nd =&gt; 4</span></span><br><span class="line">  reject(<span class="number">5</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>); <span class="comment">//3rd =&gt; 6</span></span><br><span class="line">&#125;)</span><br><span class="line">  .then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">7</span>))</span><br><span class="line">  <span class="comment">/* This `catch` handler will be placed in `microtask queue` after execution</span></span><br><span class="line"><span class="comment">  of `console.log(13)`. Once entire script is read, which will be immeditely after</span></span><br><span class="line"><span class="comment">  `console.log(13)`, `error handler` will be moved to `call stack` and executed. */</span></span><br><span class="line">  .catch(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">8</span>)) <span class="comment">// 5th =&gt; 8</span></span><br><span class="line">  <span class="comment">/* After `error handler` execution completion. `resolve handler`[() =&gt; console.log(9)]</span></span><br><span class="line"><span class="comment">   is inserted in `microtask queue`. Then, it will be pulled out from there and </span></span><br><span class="line"><span class="comment">   inserted into call stack and executed*/</span></span><br><span class="line">  .then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">9</span>)) <span class="comment">// 6th =&gt;9</span></span><br><span class="line">  <span class="comment">/* it will be skipped because last promise was fullfilled and not rejected */</span></span><br><span class="line">  .catch(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">10</span>))</span><br><span class="line">  <span class="comment">/* same story to microtask and call stack will repeat */</span></span><br><span class="line">  .then(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">11</span>)) <span class="comment">// 7th =&gt; 11</span></span><br><span class="line">  .then(<span class="built_in">console</span>.log) <span class="comment">// 8th =&gt; `undefined` was returned from last `then`, so it will print `undefined`</span></span><br><span class="line">  .finally(<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(<span class="number">12</span>)); <span class="comment">// 9th =&gt; 12</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">13</span>); <span class="comment">// 4th =&gt; 13</span></span><br></pre></td></tr></table></figure>



<h2 id="48-Prototype"><a href="#48-Prototype" class="headerlink" title="48. Prototype"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/prototype">48. Prototype</a></h2><h3 id="题目-47"><a href="#题目-47" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line">Foo.prototype.bar = <span class="number">1</span></span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> Foo()</span><br><span class="line"><span class="built_in">console</span>.log(a.bar)</span><br><span class="line"></span><br><span class="line">Foo.prototype.bar = <span class="number">2</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> Foo()</span><br><span class="line"><span class="built_in">console</span>.log(a.bar)</span><br><span class="line"><span class="built_in">console</span>.log(b.bar)</span><br><span class="line"></span><br><span class="line">Foo.prototype = &#123;<span class="attr">bar</span>: <span class="number">3</span>&#125;</span><br><span class="line"><span class="keyword">const</span> c = <span class="keyword">new</span> Foo()</span><br><span class="line"><span class="built_in">console</span>.log(a.bar)</span><br><span class="line"><span class="built_in">console</span>.log(b.bar)</span><br><span class="line"><span class="built_in">console</span>.log(c.bar)</span><br></pre></td></tr></table></figure>

<h3 id="答案-47"><a href="#答案-47" class="headerlink" title="答案"></a>答案</h3><p>Foo.prototype是改变原型链上的数，Foo.prototype = {bar: 3}是重新改变原型链，原来已声明的实例</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">2</span><br><span class="line">2</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-46"><a href="#详细解析-46" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes</a> are the mechanism by which JavaScript objects inherit features from one another. Basically, when you try to access a property of an object: if the property can’t be found in the object itself, the prototype is searched for the property. If the property still can’t be found, then the prototype’s prototype is searched, and so on until either the property is found.</p>
<p>Here, we have added <code>bar</code> property to the <code>prototype</code> of Foo. However, in the first two instances viz. <code>Foo.prototype.bar = 1</code> and <code>Foo.prototype.bar = 2</code> we are just updating this property to a value thus this change affects both previously created objects and newly created objects.</p>
<p>In the last instance, we are actually replacing the the Foo.prototype to a new object which will break the prototype chain. Hence, only newly created objects beyond this will have bar as <code>3</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - a,b,&amp;c =&gt; undefined,</span></span><br><span class="line"><span class="comment">  - Foo =&gt; it points to `Foo` object which is also a function. This object has </span></span><br><span class="line"><span class="comment">    a property `prototype` which point to another object that contain single</span></span><br><span class="line"><span class="comment">    property `bar` with value `1`.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">   - `Foo Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">        - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">        - this: points to new created object in it. This newly created object has</span></span><br><span class="line"><span class="comment">          `__proto__` property which points to same object that `Foo.prototype` </span></span><br><span class="line"><span class="comment">          points to.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        - window</span></span><br><span class="line"><span class="comment">        - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">        - a,b,&amp;c =&gt; undefined,</span></span><br><span class="line"><span class="comment">        - Foo =&gt; it points to `Foo` object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">        - newly created Object is returned.</span></span><br><span class="line"><span class="comment">      Finally, `Foo Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">    - `a` now points to return object from `Foo` execution.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> */</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">Foo.prototype.bar = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> Foo();</span><br><span class="line"><span class="comment">/* `a` is empty object, then it check `Foo.prototype` pointed object with help</span></span><br><span class="line"><span class="comment">of `__proto__` and finds `bar=1` and prints `1`. */</span></span><br><span class="line"><span class="built_in">console</span>.log(a.bar);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Value of bar in `Foo.prototype` is updated */</span></span><br><span class="line">Foo.prototype.bar = <span class="number">2</span>;</span><br><span class="line"><span class="comment">/* same story repeats as in case of `a` */</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> Foo();</span><br><span class="line"><span class="comment">/* prints 2 in both cases */</span></span><br><span class="line"><span class="built_in">console</span>.log(a.bar);</span><br><span class="line"><span class="built_in">console</span>.log(b.bar);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Now `Foo.prototype` starts pointing to a completly new object */</span></span><br><span class="line">Foo.prototype = &#123; <span class="attr">bar</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="keyword">const</span> c = <span class="keyword">new</span> Foo();</span><br><span class="line"><span class="comment">/* However `__proto__` property of `a` and `b` is still pointing to the object</span></span><br><span class="line"><span class="comment">which was pointed by previous `prototype` of `Foo`. Thus `a.bar` &amp; `b.bar` will </span></span><br><span class="line"><span class="comment">print `2`.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">When `c` was created then its `__proto__` proerty was pointing to new object pointed</span></span><br><span class="line"><span class="comment">by `Foo.prototype` so it will print `bar` value of this new object which is `3`.*/</span></span><br><span class="line"><span class="built_in">console</span>.log(a.bar);</span><br><span class="line"><span class="built_in">console</span>.log(b.bar);</span><br><span class="line"><span class="built_in">console</span>.log(c.bar);</span><br></pre></td></tr></table></figure>



<h2 id="49-this-IV"><a href="#49-this-IV" class="headerlink" title="49. this IV"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/this-4">49. <code>this</code> IV</a></h2><h3 id="题目-48"><a href="#题目-48" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bar = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">this</span>.bar++</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = &#123;</span><br><span class="line">  bar: <span class="number">10</span>,</span><br><span class="line">  foo1: foo,</span><br><span class="line">  foo2: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> foo()</span><br><span class="line">  &#125;,</span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a.foo1.call())</span><br><span class="line"><span class="built_in">console</span>.log(a.foo1())</span><br><span class="line"><span class="built_in">console</span>.log(a.foo2.call())</span><br><span class="line"><span class="built_in">console</span>.log(a.foo2())</span><br></pre></td></tr></table></figure>

<h3 id="答案-48"><a href="#答案-48" class="headerlink" title="答案"></a>答案</h3><p>只有a.foo1()调用的是对象里的bar，其余this都指向window</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">10</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-47"><a href="#详细解析-47" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call() method</a> calls a function with a given <code>this</code> value and arguments provided individually.</p>
<p>When we don’t specify <code>this</code>, it’ll refer to the globalThis aka <code>window</code> in the browser’s context.</p>
<ol>
<li><code>a.foot.call()</code> makes <code>this</code> point to the window.bar and hence 1 is returned (it also increments bar because of post-increment)</li>
<li><code>a.foo1()</code> this time its a normal function call so <code>this</code> will refer to <code>a</code> and returns 10 (again increments it too)</li>
<li><code>a.foo2.call</code> is similar to the first case, no argument is passed hence <code>this</code> is the window and it prints 2 (again incremented after returning)</li>
<li>In <code>a.foo2()</code>, inside the function body <code>foo</code> is executed independently losing context of <code>a</code>. Hence, it again prints global <code>bar</code> i.e. 3</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global Execution Context is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">  - window</span></span><br><span class="line"><span class="comment">  - this =&gt; window</span></span><br><span class="line"><span class="comment">  - bar,&amp; a =&gt; undefined,</span></span><br><span class="line"><span class="comment">  - foo =&gt; it points to `foo` object which is also a function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">  - `bar` is assigned `1`.</span></span><br><span class="line"><span class="comment">  - object `a` is defined as `&#123;bar: 10, foo1: [this point to same object that </span></span><br><span class="line"><span class="comment">    global `foo` points ], foo2: [this points to object which contains defnition </span></span><br><span class="line"><span class="comment">    of foo2]&#125;`. </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> bar = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">this</span>.bar++;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = &#123;</span><br><span class="line">  bar: <span class="number">10</span>,</span><br><span class="line">  foo1: foo,</span><br><span class="line">  foo2: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> foo();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">1. Every scope in JavaScript has a `this` object that </span></span><br><span class="line"><span class="comment">represents the calling object for the function.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">2. When a function is called while attached to an object, </span></span><br><span class="line"><span class="comment">the value of this is equal to that object by default.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">3. When you&#x27;re inside a method, we can access the object </span></span><br><span class="line"><span class="comment">the method belongs to using the special value `this`:</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* `foo Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - arguments: &#123; length: 0 &#125;</span></span><br><span class="line"><span class="comment">      - this: points to same object that global `a` points to.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - bar=1, foo=&gt;f(), a=&gt; &#123; bar: 10, foo1: fn(), foo2: fn() &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - object which is pointed by `foo1` is executed, </span></span><br><span class="line"><span class="comment">      it returns `a.bar` and then increase it by one.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, `foo Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log(a.foo1()); <span class="comment">// 10</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* when nothing passed then surrounding object is taken a invoking object, </span></span><br><span class="line"><span class="comment">`window` in this case. </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">`foo1 Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - bar=1, foo=&gt;f(), a=&gt; &#123; bar: 10, foo1: fn(), foo2: fn() &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - object which is pointed by `foo1` is executed, </span></span><br><span class="line"><span class="comment">      it returns `window.bar` and then increase it by one.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, `foo1 Execution Context` is destroyed.*/</span></span><br><span class="line"><span class="built_in">console</span>.log(a.foo1.call()); <span class="comment">//1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* `foo2 Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - bar=1, foo=&gt;f(), a=&gt; &#123; bar: 10, foo1: fn(), foo2: fn() &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - `foo` is returned.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, `foo2 Execution Context` is destroyed.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Next `foo Execution Context` is `created` with following scope chain:</span></span><br><span class="line"><span class="comment">      - window</span></span><br><span class="line"><span class="comment">      - this =&gt; points to `window`</span></span><br><span class="line"><span class="comment">      - bar=1, foo=&gt;f(), a=&gt; &#123; bar: 10, foo1: fn(), foo2: fn() &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    After `creation` phase `execution` phase starts</span></span><br><span class="line"><span class="comment">      - object which is pointed by `foo` is executed, </span></span><br><span class="line"><span class="comment">      it returns `window.bar` and then increase it by one.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    Finally, `foo Execution Context` is destroyed. */</span></span><br><span class="line"><span class="built_in">console</span>.log(a.foo2.call()); <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Same as last example */</span></span><br><span class="line"><span class="built_in">console</span>.log(a.foo2()); <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>



<h2 id="50-async-await"><a href="#50-async-await" class="headerlink" title="50. async await"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/async-await">50. async await</a></h2><h3 id="题目-49"><a href="#题目-49" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  <span class="keyword">await</span> async2()</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">async1()</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>)</span><br><span class="line">  resolve()</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">7</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">8</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-49"><a href="#答案-49" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">4</span><br><span class="line">1</span><br><span class="line">3</span><br><span class="line">6</span><br><span class="line">8</span><br><span class="line">2</span><br><span class="line">7</span><br><span class="line">5</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-48"><a href="#详细解析-48" class="headerlink" title="详细解析"></a>详细解析</h3><p>An async function is a function declared with the <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async keyword</a>, and the <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await">await keyword</a> is permitted within it. The async and await keywords enable asynchronous, promise-based behavior.</p>
<p>Key points to remember are-</p>
<ul>
<li>All synchronous code gets executed first</li>
<li>The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Basically, it’s a nonblocking block of code that executes when the call stack is empty</li>
<li>The executor is called synchronously by the Promise constructor before even the Promise constructor returns the created object</li>
<li><code>Promises</code> create <code>Microtask</code> which has priority over the <code>Macrotask</code> created by <code>setTimeout</code>.</li>
<li>If the value of the expression following the await operator is not a Promise, it’s converted to a resolved Promise i.e. await will also trigger an item into microtask queue</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>) <span class="comment">// 2️⃣</span></span><br><span class="line">  <span class="keyword">await</span> async2()</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>) <span class="comment">// 6️⃣</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>) <span class="comment">//  3️⃣</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">4</span>) <span class="comment">// 1️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">5</span>) <span class="comment">// 8️⃣</span></span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">async1()</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">6</span>) <span class="comment">// 4️⃣</span></span><br><span class="line">  resolve()</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">7</span>) <span class="comment">// 7️⃣</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">8</span>) <span class="comment">// 5️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 6</span></span><br><span class="line"><span class="comment">// 8</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 7</span></span><br><span class="line"><span class="comment">// 5</span></span><br></pre></td></tr></table></figure>

<p>So all code execution can be explained in these steps-</p>
<ul>
<li><code>4</code> gets printed as its synchronous statement</li>
<li><code>5</code> is a setTimeout get pushed to the Macrotask queue</li>
<li><code>async1</code> gets called and <code>1</code> gets printed, then <code>async2</code> is invoked and <code>3</code> gets printed. <code>2</code> gets queued to Microtask queue</li>
<li><code>6</code> gets printed as it’s synchronous inside executer function of the promise while <code>7</code> gets queued to Microtask queue</li>
<li><code>8</code> gets printed being synchronous</li>
<li>Now since, the call stack is empty. Microtask queue is checked first and <code>2</code> and <code>7</code> gets printed</li>
<li>Lastly, queued setTimeout get executed i.e. <code>5</code> will get printed</li>
</ul>
<p>Note that, this order may vary in browsers because of underlying implementations. For example, the same code in Safari prints <code>4,1,3,6,8,7,2,5</code></p>
<h2 id="51-method"><a href="#51-method" class="headerlink" title="51. method"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/async-await">51. method</a></h2><h3 id="题目-50"><a href="#题目-50" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a trick question</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 1</span></span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">super</span>.foo())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(obj1, &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">obj1.foo()</span><br><span class="line"></span><br><span class="line"><span class="comment">// case 2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;</span><br><span class="line">  foo: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">super</span>.foo())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(obj2, &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">obj2.foo()</span><br></pre></td></tr></table></figure>

<h3 id="答案-50"><a href="#答案-50" class="headerlink" title="答案"></a>答案</h3><p>编译时报错，super只在方法中有效</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-49"><a href="#详细解析-49" class="headerlink" title="详细解析"></a>详细解析</h3><p>In <code>obj1</code> we have defined an object method <code>foo</code>. However, in case of <code>obj2</code> we have defined a property <code>foo</code> which is a function. There’s a subtle difference.</p>
<p>This code throws <code>Uncaught SyntaxError: &#39;super&#39; keyword unexpected here</code> error because <code>super</code> is valid only inside methods and not normal property/function.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// case 1</span></span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">super</span>.foo());</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">`obj1` is normal instance of `Object` and it doesn&#x27;t have `prototype`, only</span></span><br><span class="line"><span class="comment">constructor function can have `prototype` property. Instance can only has `__proto__`</span></span><br><span class="line"><span class="comment">property which point to object pointed by `prototype` property of its constructor </span></span><br><span class="line"><span class="comment">funciton.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Here. we are making `__proto__` property of `obj1` to a different object.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(obj1, &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;bar&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">`foo` method of `obj1` is invoked which invokes `foo` method of object pointed by</span></span><br><span class="line"><span class="comment">`__proto__` which result into printing `bar`</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">obj1.foo(); <span class="comment">// &#x27;bar&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;</span><br><span class="line">  foo: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">/* This will throw error because `super` can only be used in methods.</span></span><br><span class="line"><span class="comment">      What is method? It is a function which has [[HomeObject]] internal </span></span><br><span class="line"><span class="comment">      property pointing to the object to which the method belongs.</span></span><br><span class="line"><span class="comment">      </span></span><br><span class="line"><span class="comment">    Any reference to super uses the [[HomeObject]] to determine what to do. </span></span><br><span class="line"><span class="comment">    The first step in the process is to call Object.getPrototypeOf() on the </span></span><br><span class="line"><span class="comment">    [[HomeObject]] to retrieve a reference to the prototype. Next, </span></span><br><span class="line"><span class="comment">    the prototype is searched for a function with the same name. </span></span><br><span class="line"><span class="comment">    Then, the this binding is set and the method is called.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    [[HomeObject]] property is created only when method is created using </span></span><br><span class="line"><span class="comment">    ES2015 method styld. Since here normal style is used to declare `foo`,</span></span><br><span class="line"><span class="comment">    it doesn&#x27;t have [[HomeObject]], thus it will give error</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">super</span>.foo()); <span class="comment">// error</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(obj2, &#123;</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;bar&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">obj2.foo();</span><br><span class="line"></span><br><span class="line"><span class="comment">// Ans: Error. It will throw error during `excution creation phase` itself</span></span><br></pre></td></tr></table></figure>



<h2 id="52-requestAnimationFrame"><a href="#52-requestAnimationFrame" class="headerlink" title="52. requestAnimationFrame"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/requestanimationframe">52. requestAnimationFrame</a></h2><h3 id="题目-51"><a href="#题目-51" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;, <span class="number">100</span>)</span><br><span class="line"></span><br><span class="line">requestAnimationFrame(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">requestAnimationFrame(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line">  &#125;, <span class="number">10</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> end = <span class="built_in">Date</span>.now() + <span class="number">200</span>;</span><br><span class="line"><span class="keyword">while</span> (<span class="built_in">Date</span>.now() &lt; end) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-51"><a href="#答案-51" class="headerlink" title="答案"></a>答案</h3><p>requestAnimationFrame里的 setTimeout在执行别的 setTimeout事件后重新执行</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">6</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">2</span><br><span class="line">5</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-50"><a href="#详细解析-50" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout()</a> method sets a timer which executes a function or specified piece of code once the timer expires. These tasks are queued to the <code>Macrotask Queue</code></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a> method tells the browser that you wish to call a specified function to update an animation before the next repaint. These tasks are queued to the <code>Animation Queue</code></p>
<p>Since, JS is single-threaded, the main thread can only execute one statement at a time. The order in which this execution happens is—</p>
<ol>
<li>First all synchronous tasks are queued</li>
<li>The micro task queue (promises) will execute immediately when the JS run stack is empty</li>
<li>The animation queue is executed</li>
<li>The priority of macro task queue is lower than that of micro task queue and animation queue</li>
</ol>
<p>So here, first the synchronous statement <code>1</code> gets logged. Then setTimeout of <code>2</code> is added to macrotask queue. Then, RAF <code>3</code> is queued in the animation queue. Next, RAF <code>4</code> is queued to the animation queue and <code>5</code> is queued to the macrotask queue. Lastly, <code>6</code> is a synchronous statement so it gets printed second.</p>
<p>Now, since the main call stack is empty, animation queue tasks are executed (as they have higher priority over macrotask queue). Hence, order in which they get printed is 1 -&gt; 6 -&gt; 3 -&gt; 4 -&gt; 2 -&gt; 5</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Order:</span></span><br><span class="line"><span class="comment">    -Statement</span></span><br><span class="line"><span class="comment">    - microtask, </span></span><br><span class="line"><span class="comment">    - requestAnimationFrame, </span></span><br><span class="line"><span class="comment">    - worker/port message</span></span><br><span class="line"><span class="comment">    - (macro)task. </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>); <span class="comment">// 1st</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mc = <span class="keyword">new</span> MessageChannel();</span><br><span class="line"></span><br><span class="line">mc.port1.onmessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">200</span>); <span class="comment">//6th</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>);<span class="comment">//7th</span></span><br><span class="line">&#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">300</span>); <span class="comment">// 3rd</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">requestAnimationFrame(<span class="function">() =&gt;</span> &#123;</span><br><span class="line"><span class="comment">/* Assuming 60fps =&gt; frame is repainted in every 16.6ms.</span></span><br><span class="line"><span class="comment">It will push its callback in queue after 16.6ms */</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>); <span class="comment">// 4th</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">requestAnimationFrame(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>); <span class="comment">// 5th</span></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">5</span>); <span class="comment">// 8th</span></span><br><span class="line">  &#125;, <span class="number">10</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> end = <span class="built_in">Date</span>.now() + <span class="number">200</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// by the time this will over all timers would have completed</span></span><br><span class="line"><span class="comment">// their time and queued into task queue.</span></span><br><span class="line"><span class="keyword">while</span> (<span class="built_in">Date</span>.now() &lt; end) &#123;&#125; </span><br><span class="line"></span><br><span class="line">mc.port2.postMessage(<span class="string">&quot;&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>); <span class="comment">// 2nd</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Answer: 1, 6, 300, 3, 4, 200, 2, 5</span></span><br></pre></td></tr></table></figure>



<h2 id="53-Prototype-2"><a href="#53-Prototype-2" class="headerlink" title="53. Prototype 2"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/prototype2">53. Prototype 2</a></h2><h3 id="题目-52"><a href="#题目-52" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.foo = <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> f = <span class="keyword">new</span> F()</span><br><span class="line"><span class="built_in">console</span>.log(f.prototype)</span><br></pre></td></tr></table></figure>

<h3 id="答案-52"><a href="#答案-52" class="headerlink" title="答案"></a>答案</h3><p>实例无prototype</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-51"><a href="#详细解析-51" class="headerlink" title="详细解析"></a>详细解析</h3><p>Functions like <code>F</code> have prototypes. Object instances, like <code>f</code>, don’t.</p>
<p>The instance object, in your case <code>f</code>, has an internal reference to the prototype object. This reference is used internally to resolve properties and methods in the prototype chain. However it is not accessible directly, and thus we can’t access <code>prototype</code> property of <code>f</code>.</p>
<p>REFER: <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/14450731/why-is-javascript-prototype-property-undefined-on-new-objects">https://stackoverflow.com/questions/14450731/why-is-javascript-prototype-property-undefined-on-new-objects</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Only constructor functions have &quot;.prototype&quot;.</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.foo = <span class="string">&quot;bar&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* when the new object is created, it gets its internal [[Prototype]] which cannot be </span></span><br><span class="line"><span class="comment">directly accessed. However, an instance has the `__proto__` property which points to </span></span><br><span class="line"><span class="comment">the object which is pointed by the `prototype` property of the constructor function. */</span></span><br><span class="line"><span class="keyword">const</span> f = <span class="keyword">new</span> F();</span><br><span class="line"><span class="built_in">console</span>.log(f.prototype);</span><br><span class="line"></span><br><span class="line"><span class="comment">// result: undefined</span></span><br></pre></td></tr></table></figure>



<h2 id="54-setTimeout-0ms"><a href="#54-setTimeout-0ms" class="headerlink" title="54. setTimeout(0ms)"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/setTimeout-0ms">54. setTimeout(0ms)</a></h2><h3 id="题目-53"><a href="#题目-53" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;, <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">&#125;, <span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">0</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-53"><a href="#答案-53" class="headerlink" title="答案"></a>答案</h3><p>实例无prototype</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">0</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-52"><a href="#详细解析-52" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;, <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">&#125;, <span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">0</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">// 2</span></span><br></pre></td></tr></table></figure>

<p><code>setTimeout()</code> method sets a timer that executes a function or specified piece of code once the timer expires. When this happens the handler gets pushed to a queue where they are executed one by one (if the call stack is empty)</p>
<p>Here, <code>2ms</code> is long enough for other timeouts to be pushed to the queue before it. However, <code>1ms</code> is not enough and is pushed earlier than even the following <code>0ms</code>.</p>
<p>Hence, <code>1</code> gets pushed first, then <code>0</code> and lastly <code>2</code></p>
<p>This order is different in <code>Firefox</code> as the underlying implementation might be different. <code>0 -&gt; 1 -&gt; 2</code></p>
<h2 id="55-sparse-array"><a href="#55-sparse-array" class="headerlink" title="55. sparse array"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/sparse-array">55. sparse array</a></h2><h3 id="题目-54"><a href="#题目-54" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,,,<span class="number">2</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// forEach</span></span><br><span class="line">arr.forEach(<span class="function"><span class="params">i</span> =&gt;</span> <span class="built_in">console</span>.log(i))</span><br><span class="line"></span><br><span class="line"><span class="comment">// map</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function"><span class="params">i</span> =&gt;</span> i * <span class="number">2</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// for ... of</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> i <span class="keyword">of</span> arr) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// spread</span></span><br><span class="line"><span class="built_in">console</span>.log([...arr])</span><br></pre></td></tr></table></figure>

<h3 id="答案-54"><a href="#答案-54" class="headerlink" title="答案"></a>答案</h3><p>ES5的方法跳过空格，ES6保持空格，别的方法将空格转为undefined</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">[2,empty,empty,4]</span><br><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">undefined</span><br><span class="line">2</span><br><span class="line">[1,undefined,undefined,2]</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-53"><a href="#详细解析-53" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#no_operation_for_uninitialized_values_sparse_arrays">Array.forEach()</a> is not invoked for index properties that have been deleted or are uninitialized</p>
<p>Similarly, In <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#description">Array.map()</a> callback is invoked only for indexes of the array which have assigned values (including undefined). It is not called for missing elements of the array. But output arrays does contain the holes.</p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> statement creates a loop iterating over iterable objects like an Array. For a sparse array, the holes are treated as <code>undefined</code></p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals">Spread Operator</a> (…) follows a similar behavior and expands an array such that holes are <code>undefined</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, , , <span class="number">2</span>];</span><br><span class="line"><span class="comment">// forEach</span></span><br><span class="line">arr.forEach(<span class="function">(<span class="params">i</span>) =&gt;</span> <span class="built_in">console</span>.log(i)); <span class="comment">// 1,2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">`forEach`, `map`, and `filter` don&#x27;t loop throught holes but resulted array</span></span><br><span class="line"><span class="comment">still has those rules. e.g.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">case 1:</span></span><br><span class="line"><span class="comment">console.log(arr.map((i,x) =&gt; &#123;</span></span><br><span class="line"><span class="comment">    console.log(i,x) // printed logs: 1 0, 2 3</span></span><br><span class="line"><span class="comment">    return i * 2;</span></span><br><span class="line"><span class="comment">&#125;));</span></span><br><span class="line"><span class="comment"> But returned array: [ 2, &lt;2 empty items&gt;, 4 ]</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// map</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.map(<span class="function">(<span class="params">i</span>) =&gt;</span> i * <span class="number">2</span>)); <span class="comment">// [ 2, &lt;2 empty items&gt;, 4 ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// for ... of</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> i <span class="keyword">of</span> arr) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i); <span class="comment">// 1,undefined, undefined, 2</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// spread</span></span><br><span class="line"><span class="built_in">console</span>.log([...arr]); <span class="comment">// [ 1, undefined, undefined, 2 ]</span></span><br></pre></td></tr></table></figure>



<h2 id="56-to-primitive"><a href="#56-to-primitive" class="headerlink" title="56. to primitive"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/primitive">56. to primitive</a></h2><h3 id="题目-55"><a href="#题目-55" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// case 1</span></span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;100&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj1 + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj1))</span><br><span class="line"></span><br><span class="line"><span class="comment">// case 2</span></span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;</span><br><span class="line">  [<span class="built_in">Symbol</span>.toPrimitive]() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">200</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;100&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj2 + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj2))</span><br><span class="line"></span><br><span class="line"><span class="comment">// case 3</span></span><br><span class="line"><span class="keyword">const</span> obj3 = &#123;</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;100&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(+obj3)</span><br><span class="line"><span class="built_in">console</span>.log(obj3 + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj3))</span><br><span class="line"></span><br><span class="line"><span class="comment">// case 4</span></span><br><span class="line"><span class="keyword">const</span> obj4 = &#123;</span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj4 + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj4))</span><br><span class="line"></span><br><span class="line"><span class="comment">// case 5</span></span><br><span class="line"><span class="keyword">const</span> obj5 = &#123;</span><br><span class="line">  [<span class="built_in">Symbol</span>.toPrimitive](hint) &#123;</span><br><span class="line">    <span class="keyword">return</span> hint === <span class="string">&#x27;string&#x27;</span> ? <span class="string">&#x27;100&#x27;</span> : <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj5 + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj5))</span><br></pre></td></tr></table></figure>

<h3 id="答案-55"><a href="#答案-55" class="headerlink" title="答案"></a>答案</h3><p>优先[Symbol.toPrimitive]，其次toString()，再其次valueOf</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">2</span><br><span class="line">100</span><br><span class="line">201</span><br><span class="line">200</span><br><span class="line">100</span><br><span class="line"><span class="string">&quot;1001&quot;</span></span><br><span class="line">100</span><br><span class="line">2</span><br><span class="line">NaN</span><br><span class="line">2</span><br><span class="line">100</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-54"><a href="#详细解析-54" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">valueOf()</a> method returns the primitive value of the specified object.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.toPrimitive</a> is a symbol that specifies a function valued property that is called to convert an object to a corresponding primitive value. The function is called with a string argument hint, which specifies the preferred type of the result primitive value. The hint argument can be one of “number”, “string”, and “default”</p>
<p>Let’s break it down case by case</p>
<h3 id="Case-1"><a href="#Case-1" class="headerlink" title="Case 1"></a>Case 1</h3><p>For <code>obj1</code>, we have defined <code>valueOf</code> and <code>toString</code>. While adding we use <code>valueOf</code> to get the primitive value and add 1 to it thus logging 2. <code>parseInt</code> will convert the input using <code>toString</code> method that gives ‘100’ converting it to number gives 100</p>
<h3 id="Case-2"><a href="#Case-2" class="headerlink" title="Case 2"></a>Case 2</h3><p>For <code>obj2</code>, we have defined <code>Symbol.toPrimitive</code>, <code>valueOf</code> and <code>toString</code> methods. In this example, both operations viz. addition and parseInt make use of <code>toPrimitive</code> method i.e. using 200</p>
<h3 id="Case-3"><a href="#Case-3" class="headerlink" title="Case 3"></a>Case 3</h3><p>For <code>obj3</code>, we have only defined <code>toString</code>. All three operations here, Unary operator, Addition and parseInt will use <code>toString</code> method i.e. “100”</p>
<h3 id="Case-4"><a href="#Case-4" class="headerlink" title="Case 4"></a>Case 4</h3><p>For <code>obj4</code>, we have only defined <code>valueOf</code>. So addition uses this value 1. But in parseInt, since we have not defined toString method, the string value of obj4 will be <code>[object Object]</code> hence parseInt returns <code>NaN</code></p>
<h3 id="Case-5"><a href="#Case-5" class="headerlink" title="Case 5"></a>Case 5</h3><p>For <code>obj5</code>, we have only defined Symbol.toPrimitive with custom handling for hints. For <code>Addition(+)</code>, the hint is implicitly <code>number</code>, which means toPrimitive returns 1 and 1+1=2. <code>parseInt</code> implicitly uses toPrimitive method with the hint passed as string and thus it uses “100” returning 100</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// case 1</span></span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;</span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;100&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj1 + <span class="number">1</span>); <span class="comment">// since `1` is number so `valueOf` is called =&gt; 1+1=2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj1)); <span class="comment">// since `parseInt` takes string input, `toString` is called =&gt; 100</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">whenever an object is converted to primitive, `Symbol.toPrimitive` is used. It either calls</span></span><br><span class="line"><span class="comment">`toStrng` or `valueOf` based on `hint` (which are of three type:  number, string, default). We </span></span><br><span class="line"><span class="comment">can define `Symbol.toPrimitive` ourselves also. e.g. </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// An object without Symbol.toPrimitive property.</span></span><br><span class="line"><span class="comment">var obj1 = &#123;&#125;;</span></span><br><span class="line"><span class="comment">console.log(+obj1);     // NaN</span></span><br><span class="line"><span class="comment">console.log(`$&#123;obj1&#125;`); // &quot;[object Object]&quot;</span></span><br><span class="line"><span class="comment">console.log(obj1 + &#x27;&#x27;); // &quot;[object Object]&quot;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// An object with Symbol.toPrimitive property.</span></span><br><span class="line"><span class="comment">var obj2 = &#123;</span></span><br><span class="line"><span class="comment">  [Symbol.toPrimitive](hint) &#123;</span></span><br><span class="line"><span class="comment">    if (hint == &#x27;number&#x27;) &#123;</span></span><br><span class="line"><span class="comment">      return 10;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    if (hint == &#x27;string&#x27;) &#123;</span></span><br><span class="line"><span class="comment">      return &#x27;hello&#x27;;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    return true;</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment">&#125;;</span></span><br><span class="line"><span class="comment">console.log(+obj2);     // 10        -- hint is &quot;number&quot;</span></span><br><span class="line"><span class="comment">console.log(`$&#123;obj2&#125;`); // &quot;hello&quot;   -- hint is &quot;string&quot;</span></span><br><span class="line"><span class="comment">console.log(obj2 + &#x27;&#x27;); // &quot;true&quot;    -- hint is &quot;default&quot;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 2</span></span><br><span class="line"><span class="keyword">const</span> obj2 = &#123;</span><br><span class="line">  [<span class="built_in">Symbol</span>.toPrimitive]() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">200</span>;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;100&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj2 + <span class="number">1</span>);  <span class="comment">// 201</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj2)); <span class="comment">// 200</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 3</span></span><br><span class="line"><span class="keyword">const</span> obj3 = &#123;</span><br><span class="line">  <span class="function"><span class="title">toString</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;100&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(+obj3); <span class="comment">//100</span></span><br><span class="line"><span class="built_in">console</span>.log(obj3 + <span class="number">1</span>); <span class="comment">//1001</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj3)); <span class="comment">//100</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 4</span></span><br><span class="line"><span class="keyword">const</span> obj4 = &#123;</span><br><span class="line">  <span class="function"><span class="title">valueOf</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj4 + <span class="number">1</span>); <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// parseInt take string as input, so `toString` was called. It returned &quot;[object Object]&quot;</span></span><br><span class="line"><span class="comment">// converting this string to number resulted into =&gt; NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj4));  <span class="comment">// NaN</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// case 5</span></span><br><span class="line"><span class="keyword">const</span> obj5 = &#123;</span><br><span class="line">  [<span class="built_in">Symbol</span>.toPrimitive](hint) &#123;</span><br><span class="line">    <span class="keyword">return</span> hint === <span class="string">&quot;string&quot;</span> ? <span class="string">&quot;100&quot;</span> : <span class="number">1</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj5 + <span class="number">1</span>);  <span class="comment">//2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(obj5)); <span class="comment">// 100</span></span><br></pre></td></tr></table></figure>



<h2 id="57-non-writable"><a href="#57-non-writable" class="headerlink" title="57. non-writable"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/inherit-writable-flag">57. non-writable</a></h2><h3 id="题目-56"><a href="#题目-56" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = &#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(a, <span class="string">&#x27;foo1&#x27;</span>, &#123;</span><br><span class="line">  value: <span class="number">1</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> b = <span class="built_in">Object</span>.create(a)</span><br><span class="line">b.foo2 = <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b.foo1)</span><br><span class="line"><span class="built_in">console</span>.log(b.foo2)</span><br><span class="line"></span><br><span class="line">b.foo1 = <span class="number">2</span></span><br><span class="line">b.foo2 = <span class="number">2</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b.foo1)</span><br><span class="line"><span class="built_in">console</span>.log(b.foo2)</span><br></pre></td></tr></table></figure>

<h3 id="答案-56"><a href="#答案-56" class="headerlink" title="答案"></a>答案</h3><p>Object.defineProperty劫持属性，不会被修改</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-55"><a href="#详细解析-55" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a> defines a new property directly on an object, or modifies an existing property on an object, and returns the object.</p>
<p>This takes in 3 parameters; the target object, nameof the property and descriptor. The <code>writable</code> descriptor describes if the value associated with the property can be changed with an assignment operator. <strong>Defaults to false</strong></p>
<p>Here, when defining <code>foo1</code>, since the <code>writable</code> property is not defined explicitly it’ll default to false. Meaning, that the value cannot be changed later on hence b.foo1 is locked at 1 and is immutable.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> method creates a new object, using an existing object as the prototype of the newly created object. Here, we have created a new object <code>b</code> using <code>a</code> as prototype</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Global execution context: `creation phase`</span></span><br><span class="line"><span class="comment">    - window: global object</span></span><br><span class="line"><span class="comment">    - this: window</span></span><br><span class="line"><span class="comment">    - a, b: undefined</span></span><br><span class="line"><span class="comment">Execution Phase:</span></span><br><span class="line"><span class="comment">    - a: &#123; foo1: 1 &#125;</span></span><br><span class="line"><span class="comment">    - b: points to a empty object, which has `__proto__` perperty which points to `a` object</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> a = &#123;&#125;;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(a, <span class="string">&quot;foo1&quot;</span>, &#123;</span><br><span class="line">  value: <span class="number">1</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> b = <span class="built_in">Object</span>.create(a);</span><br><span class="line">b.foo2 = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b.foo1); <span class="comment">// 1 (available throught `__proto__``)</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo2); <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line">b.foo1 = <span class="number">2</span>; <span class="comment">// fails because it is non-writable property</span></span><br><span class="line">b.foo2 = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b.foo1); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo2); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>



<h2 id="58-inherit-getter-setter"><a href="#58-inherit-getter-setter" class="headerlink" title="58. inherit getter setter"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/inherit-getter-setter">58. inherit getter setter</a></h2><h3 id="题目-57"><a href="#题目-57" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> val = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  <span class="keyword">set</span> <span class="title">foo</span>(<span class="params">_val</span>) &#123;</span><br><span class="line">    val = _val</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">B</span> <span class="keyword">extends</span> <span class="title">A</span> </span>&#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">C</span> <span class="keyword">extends</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> B()</span><br><span class="line"><span class="built_in">console</span>.log(b.foo)</span><br><span class="line">b.foo = <span class="number">1</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c = <span class="keyword">new</span> C()</span><br><span class="line"><span class="built_in">console</span>.log(c.foo)</span><br><span class="line">c.foo = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(c.foo)</span><br><span class="line"><span class="built_in">console</span>.log(b.foo)</span><br></pre></td></tr></table></figure>

<h3 id="答案-57"><a href="#答案-57" class="headerlink" title="答案"></a>答案</h3><p>B没有重写getter/setter，C重写getter/setter</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">0</span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line">1</span><br><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-56"><a href="#详细解析-56" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here we have a global <code>val</code> and then three classes. <code>A</code> has both <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> and <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> defined. <code>B</code> extends <code>A</code> without any overriding. <code>C</code> extends <code>A</code> with <code>get foo()</code> overridden.</p>
<p>Note that since we have not used <code>this</code> keyword while setting, it’ll actually update the outer variable <code>val</code></p>
<p>So, when we create a new object b, the value of val is 0 and hence b.foo returns 0. Then we do <code>b.foo = 1</code> which means val also gets updated to 1 and hence it prints 1 next.</p>
<p>Next we create a new object c, c.foo returns 1 (from above). However, <code>c.foo = 2</code> will not update val as there is no setter defined hence val remains 1 thus printing 1 for both <code>c.foo</code> and <code>b.foo</code> Apparently, when we override the get method, it appears that the set method must also be overridden, otherwise undefined is returned <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/28950760/override-a-setter-and-the-getter-must-also-be-overridden">See this</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> val = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  <span class="keyword">set</span> <span class="title">foo</span>(<span class="params">_val</span>) &#123;</span><br><span class="line">    val = _val</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">B</span> <span class="keyword">extends</span> <span class="title">A</span> </span>&#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">C</span> <span class="keyword">extends</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> B()</span><br><span class="line"><span class="built_in">console</span>.log(b.foo) <span class="comment">// 0</span></span><br><span class="line">b.foo = <span class="number">1</span> <span class="comment">// val also gets updated to 1</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo) <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c = <span class="keyword">new</span> C()</span><br><span class="line"><span class="built_in">console</span>.log(c.foo) <span class="comment">// 1</span></span><br><span class="line">c.foo = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(c.foo) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>



<h2 id="59-override-setter"><a href="#59-override-setter" class="headerlink" title="59. override setter"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/override-setter">59. override setter</a></h2><h3 id="题目-58"><a href="#题目-58" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  val = <span class="number">1</span></span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">B</span> </span>&#123;</span><br><span class="line">  val = <span class="number">2</span></span><br><span class="line">  <span class="keyword">set</span> <span class="title">foo</span>(<span class="params">val</span>) &#123;</span><br><span class="line">    <span class="built_in">this</span>.val = val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> A()</span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> B()</span><br><span class="line"><span class="built_in">console</span>.log(a.foo)</span><br><span class="line"><span class="built_in">console</span>.log(b.foo)</span><br><span class="line">b.foo = <span class="number">3</span></span><br><span class="line"><span class="built_in">console</span>.log(b.val)</span><br><span class="line"><span class="built_in">console</span>.log(b.foo)</span><br></pre></td></tr></table></figure>

<h3 id="答案-58"><a href="#答案-58" class="headerlink" title="答案"></a>答案</h3><p>B重新修改val</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">undefined</span><br><span class="line">3</span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h4 id="详细解析-57"><a href="#详细解析-57" class="headerlink" title="详细解析"></a>详细解析</h4><p>Here, we have two classes defined. <code>A</code> has a property <code>val</code> initialized to 1 and a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> <code>foo</code> defined. <code>B</code> also has a property <code>val</code> and a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> <code>foo</code></p>
<p>Remember that, when we override the get method, it appears that the set method must also be overridden, otherwise undefined is returned and vice-versa <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/28950760/override-a-setter-and-the-getter-must-also-be-overridden">See this</a></p>
<p>So, when we create two objects <code>a</code> and <code>b</code>; <code>a.foo</code> will return the value 1 as getter is defined but <code>b.foo</code> returns undefined.</p>
<p>Also, when we do <code>b.foo=3</code>, the setter works and val gets updated to 3. However, as there is no getter defined <code>b.foo</code> returns undefined. Note that, accessing <code>b.val</code> directly returns the new value 3 though</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span> </span>&#123;</span><br><span class="line">  val = <span class="number">1</span></span><br><span class="line">  <span class="keyword">get</span> <span class="title">foo</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">B</span> </span>&#123;</span><br><span class="line">  val = <span class="number">2</span></span><br><span class="line">  <span class="keyword">set</span> <span class="title">foo</span>(<span class="params">val</span>) &#123;</span><br><span class="line">    <span class="built_in">this</span>.val = val</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> A()</span><br><span class="line"><span class="keyword">const</span> b = <span class="keyword">new</span> B()</span><br><span class="line"><span class="built_in">console</span>.log(a.foo) <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo) <span class="comment">// undefined</span></span><br><span class="line">b.foo = <span class="number">3</span></span><br><span class="line"><span class="built_in">console</span>.log(b.val) <span class="comment">// 3</span></span><br><span class="line"><span class="built_in">console</span>.log(b.foo) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>



<h2 id="60-postMessage"><a href="#60-postMessage" class="headerlink" title="60. postMessage"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/postMessage">60. postMessage</a></h2><h3 id="题目-59"><a href="#题目-59" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onmessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.postMessage(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-59"><a href="#答案-59" class="headerlink" title="答案"></a>答案</h3><p>window.onmessage是微任务，优先级在promise之后</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">3</span><br><span class="line">2</span><br><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-58"><a href="#详细解析-58" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel">MessageChannel</a> interface of the Channel Messaging API allows us to create a new message channel and send data through it</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> method returns a Promise object that is resolved with a given value.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout()</a> method sets a timer which executes a function or specified piece of code once the timer expires. These tasks are queued to the <code>Macrotask Queue</code></p>
<p>Since JS is single-threaded, the main thread can only execute one statement at a time. The order in which this execution happens is—</p>
<ol>
<li>First all synchronous tasks are queued</li>
<li>The micro task queue (promises, worker threads, messaagechannel) will execute immediately when the JS run stack is empty</li>
<li>The priority of macro task queue is lower than that of micro task queue</li>
</ol>
<p>So here, first the synchronous statement <code>1</code> gets logged. Then <code>onmessage</code> handler gets associated with messagechannel. <code>3</code> is a resolved promise so it’s added to the microtask queue. setTimeout of <code>4</code> is added to macrotask queue. <code>5</code> is a synchronous statement so it gets printed second. Using postMessage we trigger the handler and <code>2</code> gets added to micro task queue. Lastly, <code>6</code> is a synchronous statement so it gets printed third.</p>
<p>Now, since the main call stack is empty, microtask queue tasks are executed (as they have higher priority over macrotask queue). Hence, order in which they get printed is 1 -&gt; 5 -&gt; 6 -&gt; 3 -&gt; 2 -&gt; 4</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Order:</span></span><br><span class="line"><span class="comment">    - Statement</span></span><br><span class="line"><span class="comment">    - Promise/callbacks</span></span><br><span class="line"><span class="comment">    - Web worker (port/window.eventHander, etc..)</span></span><br><span class="line"><span class="comment">    - Settimeout</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>) <span class="comment">// 1️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onmessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>) <span class="comment">// 5️⃣</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>) <span class="comment">// 4️⃣</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>) <span class="comment">// 6️⃣</span></span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>) <span class="comment">// 2️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.postMessage(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>) <span class="comment">// 3️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 5</span></span><br><span class="line"><span class="comment">// 6</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 4</span></span><br></pre></td></tr></table></figure>



<h2 id="61-onClick"><a href="#61-onClick" class="headerlink" title="61. onClick"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/messsage-channel-is-async">61. onClick</a></h2><h3 id="题目-60"><a href="#题目-60" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.body.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.body.click()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-60"><a href="#答案-60" class="headerlink" title="答案"></a>答案</h3><p>onClick是一个同步任务</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">5</span><br><span class="line">2</span><br><span class="line">6</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-59"><a href="#详细解析-59" class="headerlink" title="详细解析"></a>详细解析</h3><p>Key points to remember are-</p>
<ol>
<li>Synchronous code (including event listeners) gets executed first in order.</li>
<li>The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Basically, it’s a non-blocking block of code that executes when the call stack is empty</li>
<li><code>Promises</code> create <code>Microtask</code> which has priority over the <code>Macrotask</code> created by <code>setTimeout</code>.</li>
</ol>
<p>In this example, <code>1</code> gets printed, Promise <code>3</code> gets queued to Micro Stack, setTimeout <code>4</code> gets queued as Macro task. <code>5</code>, <code>2</code>, and <code>6</code> then get printed synchronously</p>
<p>Once the call stack is empty,<code>3</code> is printed. Once the Microtask queue is empty then <code>4</code> gets printed</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>) <span class="comment">// 1️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.body.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>) <span class="comment">// 3️⃣</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>) <span class="comment">// 5️⃣</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>) <span class="comment">// 6️⃣</span></span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>) <span class="comment">// 2️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.body.click()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>) <span class="comment">// 4️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 5</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 6</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 4</span></span><br></pre></td></tr></table></figure>



<h2 id="62-MessageChannel"><a href="#62-MessageChannel" class="headerlink" title="62. MessageChannel"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/message-channel">62. MessageChannel</a></h2><h3 id="题目-61"><a href="#题目-61" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mc = <span class="keyword">new</span> MessageChannel()</span><br><span class="line"></span><br><span class="line">mc.port1.onmessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>)</span><br><span class="line"></span><br><span class="line">mc.port2.postMessage(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-61"><a href="#答案-61" class="headerlink" title="答案"></a>答案</h3><p>MessageChannel是微任务，优先级在promise之后</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">3</span><br><span class="line">2</span><br><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-60"><a href="#详细解析-60" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout()</a> method sets a timer which executes a function or specified piece of code once the timer expires. These tasks are queued to the <code>Macrotask Queue</code></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> method returns a Promise object that is resolved with a given value.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel">MessageChannel</a> interface of the Channel Messaging API allows us to create a new message channel and send data through it</p>
<p>Since JS is single-threaded, the main thread can only execute one statement at a time. The order in which this execution happens is—</p>
<ol>
<li>First all synchronous tasks are queued</li>
<li>The micro task queue (promises, worker threads, messaagechannel) will execute immediately when the JS run stack is empty</li>
<li>The priority of macro task queue is lower than that of micro task queue</li>
</ol>
<p>So here, first the synchronous statement <code>1</code> gets logged. Then <code>onmessage</code> handler gets associated with messagechannel. <code>3</code> is a resolved promise so it’s added to the microtask queue. setTimeout of <code>4</code> is added to macrotask queue. <code>5</code> is a synchronous statement so it gets printed second. Using postMessage we trigger the handler and <code>2</code> gets added to micro task queue. Lastly, <code>6</code> is a synchronous statement so it gets printed third.</p>
<p>Now, since the main call stack is empty, microtask queue tasks are executed (as they have higher priority over macrotask queue). Hence, order in which they get printed is 1 -&gt; 5 -&gt; 6 -&gt; 3 -&gt; 2 -&gt; 4</p>
<p>This requires understaning of the event loop.</p>
<p>console.log is immediately queued in the stack. promise callback is queued in a microtask queue. others like <code>setTimeout</code> and <code>onmessage callback</code> are queued in the task queue.</p>
<p>The stack determines execution order. The microtasks are pushed to the stack before the task queue.</p>
<p>So, in this example</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Order:</span></span><br><span class="line"><span class="comment">    - Statement</span></span><br><span class="line"><span class="comment">    - Promise/callbacks</span></span><br><span class="line"><span class="comment">    - Web worker (port/window.eventHander, etc..)</span></span><br><span class="line"><span class="comment">    - Settimeout</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>) <span class="comment">// 1️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mc = <span class="keyword">new</span> MessageChannel()</span><br><span class="line"></span><br><span class="line">mc.port1.onmessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">2</span>) <span class="comment">// 5️⃣</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">3</span>) <span class="comment">// 4️⃣</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">4</span>) <span class="comment">// 6️⃣</span></span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span>) <span class="comment">// 2️⃣</span></span><br><span class="line"></span><br><span class="line">mc.port2.postMessage(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">6</span>) <span class="comment">// 3️⃣</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 5</span></span><br><span class="line"><span class="comment">// 6</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 4</span></span><br></pre></td></tr></table></figure>



<h2 id="63-in"><a href="#63-in" class="headerlink" title="63. in"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/in-coercion">63. in</a></h2><h3 id="题目-62"><a href="#题目-62" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  foo: <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;foo&#x27;</span> <span class="keyword">in</span> obj)</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;foo&#x27;</span>] <span class="keyword">in</span> obj)</span><br></pre></td></tr></table></figure>

<h3 id="答案-62"><a href="#答案-62" class="headerlink" title="答案"></a>答案</h3><p>键转化为字符串</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-61"><a href="#详细解析-61" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The in operator returns true if the specified property is in the specified object or its prototype chain</p>
</blockquote>
<p>The property could be a string or symbol representing a property name or array index (non-symbols will be coerced to strings). So, <code>[&#39;foo&#39;]</code> gets coerced to <code>&quot;foo&quot;</code> which is present in <code>obj</code></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  foo: <span class="string">&#x27;bar&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;foo&#x27;</span> <span class="keyword">in</span> obj);   <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;foo&#x27;</span>] <span class="keyword">in</span> obj); <span class="comment">// true - [&#x27;foo&#x27;] converts to string</span></span><br></pre></td></tr></table></figure>



<h2 id="64-reference-type"><a href="#64-reference-type" class="headerlink" title="64. reference type"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/reference-type">64. reference type</a></h2><h3 id="题目-63"><a href="#题目-63" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  msg: <span class="string">&#x27;BFE&#x27;</span>,</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.msg)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;dev&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.foo();</span><br><span class="line">(obj.foo)();</span><br><span class="line">(obj.foo || obj.bar)();</span><br></pre></td></tr></table></figure>

<h3 id="答案-63"><a href="#答案-63" class="headerlink" title="答案"></a>答案</h3><p>第一二个调用了obj.msg，第三个obj.foo执行，this指向window</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;BFE&quot;</span></span><br><span class="line"><span class="string">&quot;BFE&quot;</span></span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-62"><a href="#详细解析-62" class="headerlink" title="详细解析"></a>详细解析</h3><p>In normal javascript functions, <code>this</code> keyword points to who is calling the function (dynamic binding). Thus, when we invoke a function as <code>obj.foo()</code> the <code>this</code> keyword points to <code>obj</code>.</p>
<p>Note that, <code>(obj.foo)()</code> is the same as <code>obj.foo()</code> and <code>this</code> again points to <code>obj</code></p>
<p><code>()</code> is a grouping operator and is evaluated before execution. Here the logical OR expression <code>||</code> returns the first truthy value i.e. <code>obj.foo</code> which is a plain function <code>foo(&#123;console.log(this.msg)&#125;</code>. Later on, when we execute this function, it’s just a function without any connection to <code>obj</code> and hence it points to <code>window</code> and <code>window.msg</code> is <code>undefined</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  msg: <span class="string">&quot;BFE&quot;</span>,</span><br><span class="line">  <span class="function"><span class="title">foo</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.msg);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;dev&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*  `foo` called as method of `obj` thus prints &#x27;BFE&#x27; */</span></span><br><span class="line">obj.foo(); <span class="comment">// &#x27;BFE&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Since there is no operator in parenthesis `()` thus it will return funciton</span></span><br><span class="line"><span class="comment">as it is therefore `(obj.foo)()===obj.foo()`. So it is same like above  */</span></span><br><span class="line">(obj.foo)(); <span class="comment">// &#x27;BFE&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Here there are operators in parentheis, thus it will return `obj.foo` and change</span></span><br><span class="line"><span class="comment">it context environment from function to global. And there is no `msg` in</span></span><br><span class="line"><span class="comment">global environment, hence it will print `undefined` */</span></span><br><span class="line">(obj.foo || obj.bar)(); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>



<h2 id="65-Function-name"><a href="#65-Function-name" class="headerlink" title="65. Function name"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Function-name">65. Function name</a></h2><h3 id="题目-64"><a href="#题目-64" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;BFE&#x27;</span>; </span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(foo());</span><br><span class="line"><span class="built_in">console</span>.log(bar());</span><br></pre></td></tr></table></figure>

<h3 id="答案-64"><a href="#答案-64" class="headerlink" title="答案"></a>答案</h3><p>明明函数可以直接调用，函数名无法声明</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;BFE&quot;</span></span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-63"><a href="#详细解析-63" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here, because the name <code>bar</code> is used within a function expression, it doesn’t get declared in the outer scope. With named function expressions, the name of the function expression is enclosed within its own scope.</p>
<p>That’s why <code>foo()</code> return “BFE”, while <code>bar()</code> throws a <code>ReferenceError</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;BFE&quot;</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/*  In `named function expression`, identifier ( in this case `bar`) is</span></span><br><span class="line"><span class="comment">only available in the function body. </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">`bar` is never declared outside of the function body. Even if we do `console.log(bar)` </span></span><br><span class="line"><span class="comment">outside of the function, it will throw `ReferenceError`</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">console</span>.log(foo()); <span class="comment">// &quot;BFE&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(bar()); <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>



<h2 id="66-comma"><a href="#66-comma" class="headerlink" title="66. comma"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/comma">66. comma</a></h2><h3 id="题目-65"><a href="#题目-65" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="string">&quot;BFE&quot;</span>,</span><br><span class="line">  b: <span class="string">&quot;dev&quot;</span>,</span><br><span class="line">  func: (<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="keyword">return</span> <span class="built_in">this</span>.a; &#125;, <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>)</span>&#123; <span class="keyword">return</span> <span class="built_in">this</span>.b; &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.func())</span><br></pre></td></tr></table></figure>

<h3 id="答案-65"><a href="#答案-65" class="headerlink" title="答案"></a>答案</h3><p> common operator evaluates from left to right and returns the last(right most) operand, so func is assined with bar()</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dev&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-64"><a href="#详细解析-64" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">comma operator</a> (,) evaluates each of its operands (from left to right) and returns the value of the last operand.</p>
<p>This means, <code>func</code> is actually assigned the function <code>bar</code> as it is the last operand; and when invoked it prints <code>this.b</code> i.e. <code>&quot;dev&quot;</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a: <span class="string">&quot;BFE&quot;</span>,</span><br><span class="line">  b: <span class="string">&quot;dev&quot;</span>,</span><br><span class="line">  <span class="comment">/* Comma operator returns last value. Thus, here `func=bar()`, which will</span></span><br><span class="line"><span class="comment">  print `dev` */</span></span><br><span class="line">  func:</span><br><span class="line">    (<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.a;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.b;</span><br><span class="line">    &#125;),</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj.func());</span><br><span class="line"><span class="comment">// comma operator evaluates from left to right and returns the last(right most) operand, so func is assined with bar()</span></span><br></pre></td></tr></table></figure>



<h2 id="67-if"><a href="#67-if" class="headerlink" title="67. if"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/if">67. if</a></h2><h3 id="题目-66"><a href="#题目-66" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;BFE&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;dev&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo()</span><br><span class="line">bar()</span><br></pre></td></tr></table></figure>

<h3 id="答案-66"><a href="#答案-66" class="headerlink" title="答案"></a>答案</h3><p>foo是函数，bar是undefined</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;BFE&quot;</span></span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-65"><a href="#详细解析-65" class="headerlink" title="详细解析"></a>详细解析</h3><p>Function declarations are not block scoped. This means a function declared in a block will leak outside it. If and when Javascript actually executes the block and creates the function for you.</p>
<p>In the first <code>if</code>, JS will actually create the function <code>foo</code> that is available outside the block too. When we are declaring the function inside the <code>if</code> block, with a <code>false</code> condition, JS won’t execute the if block hence won’t create the function <code>bar</code>.</p>
<p>So, you get an error while calling the function <code>bar</code>.</p>
<p>However, this <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function#conditionally_created_functions">behavior may be inconsistent</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">When functions are declared inside the if-else block then their name is hoisted.</span></span><br><span class="line"><span class="comment">However, their definition is attached only in the if-else block.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">If we write on first-line  `console.log(foo, bar)` then it will print `undefined undefined`,</span></span><br><span class="line"><span class="comment">but `foo` gets defined in the first `if` block but not `bar`. Thus, invoking `foo` will </span></span><br><span class="line"><span class="comment">print `BFE` whereas invoking `bar` which is `undefined` will throw TypeError.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;BFE&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;dev&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo(); <span class="comment">// &#x27;BFE&#x27;</span></span><br><span class="line">bar(); <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>



<h2 id="68-if-II"><a href="#68-if-II" class="headerlink" title="68. if II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/if-II">68. if II</a></h2><h3 id="题目-67"><a href="#题目-67" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;BFE&#x27;</span>) &#125;) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;dev&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>

<h3 id="答案-67"><a href="#答案-67" class="headerlink" title="答案"></a>答案</h3><p>foo是undefined，函数转化为bool进行判断</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;dev&quot;</span></span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-66"><a href="#详细解析-66" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here, because we are using a function inside an <code>if</code> it’s supposed to be evaluated as a boolean. Boolean(any function) is always <code>true</code>. So, if block gets through and <code>&quot;dev&quot;</code> gets printed.</p>
<p>In simple terms, <code>foo</code> gets evaluated and it exists for that evaluation step only. Unlike other normal function declarations <code>foo</code> will not get hoisted and will not be available to execute anywhere (not even inside that if block)</p>
<p>Trying to run <code>foo</code> after will give <code>ReferenceError: foo is not defined</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;BFE&#x27;</span>) &#125;) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;dev&#x27;</span>) <span class="comment">// &quot;dev&quot;  =&gt; &#x27;if&#x27; convert statement to Boolean, Boolean of function is true. </span></span><br><span class="line">&#125;</span><br><span class="line">foo() <span class="comment">// Error  =&gt; in &#x27;if&#x27; condition foo() was function expression not function declaration. so foo is not hoisted, so foo is not defined. calling the function which is not defined throws error</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &quot;dev&quot;</span></span><br><span class="line"><span class="comment">// Error</span></span><br></pre></td></tr></table></figure>



<h2 id="69-undefined"><a href="#69-undefined" class="headerlink" title="69. undefined"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/undefined">69. undefined</a></h2><h3 id="题目-68"><a href="#题目-68" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b, <span class="literal">undefined</span>, <span class="literal">undefined</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo.length)</span><br></pre></td></tr></table></figure>

<h3 id="答案-68"><a href="#答案-68" class="headerlink" title="答案"></a>答案</h3><p>函数参数的个数</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-67"><a href="#详细解析-67" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters. In this case, <code>foo</code> has 4 parameters hence it logs 4</p>
<p>Note that we are just logging the <code>foo.length</code> and not invoking <code>foo</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b, <span class="literal">undefined</span>, <span class="literal">undefined</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo.length) <span class="comment">// 4</span></span><br></pre></td></tr></table></figure>

<p>Reason:</p>
<p>length method when used will function returns the number of parameters - (a, b, undefined, undefined)</p>
<p>Total parameter = 4</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;BFE.dev&#x27;</span>) </span><br><span class="line"><span class="comment">//this line will not exceute since we never called the function foo</span></span><br></pre></td></tr></table></figure>



<h2 id="70-function"><a href="#70-function" class="headerlink" title="70. function"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/function">70. function</a></h2><h3 id="题目-69"><a href="#题目-69" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="number">1</span>) &#125;</span><br><span class="line"><span class="keyword">var</span> foo = <span class="number">2</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="number">3</span>) &#125;</span><br><span class="line">foo()</span><br></pre></td></tr></table></figure>

<h3 id="答案-69"><a href="#答案-69" class="headerlink" title="答案"></a>答案</h3><p>最后foo=2</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-68"><a href="#详细解析-68" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting">Hoisting</a> is the process whereby the interpreter appears to move the declaration of functions, and variables to the top of their scope, prior to execution of the code.</p>
<p>JavaScript only hoists declarations, not initializations! However, with function declarations, the entire function gets moved to the top.</p>
<p>So, effectively the above code becomes —</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="number">1</span>) &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="number">3</span>) &#125;</span><br><span class="line">foo = <span class="number">2</span>;</span><br><span class="line">foo(); <span class="comment">// trying to invoke a number throws error</span></span><br></pre></td></tr></table></figure>

<p>Reason:</p>
<p>Line 1: Hoisting will take place, Function declaration will be hoisted and in the global object foo will be equal to a function.</p>
<p>Line 2: foo variable will be hoisted. Now since foo keyword is already present in the global object as a function it will get replaced by foo variable (foo=2).</p>
<p>Why did this happen?</p>
<p>Because variable assignment has more importance than function declaration (when the name of variable and function are the same)</p>
<p>Order of Precedence: variable Assigment &gt; function declaration &gt; variable declaration</p>
<p>Line 3: It will have no effect due to the above-mentioned rule.</p>
<p>Line 4: Since foo is not a function it will throw an error.</p>
<h2 id="71-two-way-generator"><a href="#71-two-way-generator" class="headerlink" title="71. two-way generator"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/generator-2-way">71. two-way generator</a></h2><h3 id="题目-70"><a href="#题目-70" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">gen</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">2</span> * (<span class="keyword">yield</span> <span class="number">100</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> generator = gen()</span><br><span class="line"><span class="built_in">console</span>.log(generator.next().value)</span><br><span class="line"><span class="built_in">console</span>.log(generator.next(<span class="number">1</span>).value)</span><br><span class="line"><span class="built_in">console</span>.log(generator.next(<span class="number">1</span>).value)</span><br></pre></td></tr></table></figure>

<h3 id="答案-70"><a href="#答案-70" class="headerlink" title="答案"></a>答案</h3><p>第一次返回的结果为1，打印100，第二次打印2*1=2</p>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">100</span><br><span class="line">2</span><br><span class="line">undefined</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-69"><a href="#详细解析-69" class="headerlink" title="详细解析"></a>详细解析</h3><p>With a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">generator function</a>, values are not evaluated until they are needed. Therefore a generator allows us to define a potentially infinite data structure.</p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next">next()</a> method returns an object with two properties done and value. You can also provide a parameter to the next method to send a value to the generator. The value will be assigned as a result of a yield expression.</p>
<ol>
<li>Because <code>Grouping Operator</code> gets evaluated first, the generator function <code>gen</code> yields/returns 100</li>
<li>Since we have passed <code>1</code> to the next() method. <code>yield 100</code> is basically replaced with 1 and it returns 2*1 = 2</li>
<li>Since generator is completed it returns <code>undefined</code></li>
</ol>
<p>The equivalent syntax of the gen() method is this:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">gen</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">   <span class="keyword">yield</span> (<span class="number">2</span> * (<span class="keyword">yield</span> <span class="number">100</span>))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>to resolve the outer yield, the inner yield need to resolve first in order to calculate the entire express similar to when we say</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> <span class="number">3</span> * getValue();</span><br></pre></td></tr></table></figure>

<p>Where we need to call and resolve getValue before we get the result.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">gen</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">2</span> * (<span class="keyword">yield</span> <span class="number">100</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> generator = gen()</span><br><span class="line"><span class="built_in">console</span>.log(generator.next().value)  <span class="comment">// inner yield rersolves first: 100</span></span><br><span class="line"><span class="built_in">console</span>.log(generator.next(<span class="number">1</span>).value) <span class="comment">// repalce yield 100 with 1 and execute yield 2*1: 2</span></span><br><span class="line"><span class="built_in">console</span>.log(generator.next(<span class="number">1</span>).value) <span class="comment">// gen status is done at this point: undefined</span></span><br></pre></td></tr></table></figure>

<p>类似的题目</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> *<span class="title">foo</span>(<span class="params">x</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> y = <span class="number">2</span> * (<span class="keyword">yield</span> (x + <span class="number">1</span>));</span><br><span class="line">    <span class="keyword">var</span> z = <span class="keyword">yield</span> (y / <span class="number">3</span>);</span><br><span class="line">    <span class="keyword">return</span> (x + y + z);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> it = foo( <span class="number">5</span> );</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( it.next() );      <span class="comment">// get x+1=6</span></span><br><span class="line"><span class="built_in">console</span>.log( it.next( <span class="number">3</span> ) );   <span class="comment">// turn &quot;yield(x+1)&quot; into 3, so y=6, so for the next yield, we get y/3=2</span></span><br><span class="line"><span class="built_in">console</span>.log( it.next( <span class="number">88</span> ) );  <span class="comment">// turn &quot;yield (y / 3)&quot; into 88, so z=88, at this point, there&#x27;s no &quot;yield&quot; left in the code, done:true, but we have a return, we return x+y+z=5+6+88=99</span></span><br><span class="line"><span class="built_in">console</span>.log( it.next() );  <span class="comment">// there&#x27;s no &quot;yield&quot; left in the code, we get undefined, done: true</span></span><br></pre></td></tr></table></figure>



<h2 id="72-Array-length"><a href="#72-Array-length" class="headerlink" title="72. Array length"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/array-length">72. Array length</a></h2><h3 id="题目-71"><a href="#题目-71" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code>?</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyArray</span> <span class="keyword">extends</span> <span class="title">Array</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">length</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">3</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr1 = <span class="keyword">new</span> MyArray(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr1.length)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr2.length)</span><br></pre></td></tr></table></figure>

<h3 id="答案-71"><a href="#答案-71" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">10</span><br><span class="line">10</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-70"><a href="#详细解析-70" class="headerlink" title="详细解析"></a>详细解析</h3><p>Subclasses cannot override parentClass properties. This is by design.</p>
<p><a target="_blank" rel="noopener" href="https://github.com/Microsoft/TypeScript/issues/338#issuecomment-51093979">Explaination</a></p>
<p><a target="_blank" rel="noopener" href="https://github.com/Microsoft/TypeScript/issues/338#issuecomment-99180950">Workaround</a></p>
<p>The parent’s <code>length</code> is an instance property, and it overshadows the child class’s <code>length</code> property, which is part of the instance’s prototype. Basically, you will not be able to override the parent class’s properties.</p>
<p>I think this behavior might be because variable overriding might break methods inherited from the Parent if we change its type in the Child class.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyArray</span> <span class="keyword">extends</span> <span class="title">Array</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">length</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">3</span> <span class="comment">// this will not override parent&#x27;s length</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr1 = <span class="keyword">new</span> MyArray(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr1.length) <span class="comment">// 10</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr2.length) <span class="comment">// 10</span></span><br></pre></td></tr></table></figure>



<h2 id="73-window-name"><a href="#73-window-name" class="headerlink" title="73. window name"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/window-name">73. window name</a></h2><h3 id="题目-72"><a href="#题目-72" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + <span class="built_in">this</span>.a);</span><br><span class="line">  <span class="keyword">var</span> a = <span class="string">&#x27;2&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(a + <span class="built_in">this</span>.a);</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> name = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(name + <span class="built_in">this</span>.name);</span><br><span class="line">  <span class="keyword">var</span> name = <span class="string">&#x27;2&#x27;</span></span><br><span class="line">  <span class="built_in">console</span>.log(name + <span class="built_in">this</span>.name);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h3 id="答案-72"><a href="#答案-72" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">NaN</span><br><span class="line"><span class="string">&quot;21&quot;</span></span><br><span class="line"><span class="string">&quot;undefined1&quot;</span></span><br><span class="line"><span class="string">&quot;21&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-71"><a href="#详细解析-71" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/name">Window.name</a> property gets/sets the name of the window’s browsing context.</p>
<p><code>name</code> is a special case such that when you are using the variable named <code>name</code> in the global scope it is treated as <code>window.name</code> In Google Chrome, window.name gets the value as a string.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = &#123;&#125;; <span class="comment">// this is converted using toString() </span></span><br><span class="line"><span class="built_in">console</span>.log(name) <span class="comment">// [object Object] </span></span><br></pre></td></tr></table></figure>

<p>In each of these functions, the inner variable gets hoisted inside the function and hence its value is <code>undefined</code>. However, both <code>this.a</code> and <code>this.name</code> refer to global variables.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// &#x27;var a = 2&#x27; is hoisted here -&gt; var a = undefined</span></span><br><span class="line">  <span class="comment">// &#x27;this.a&#x27; is number -&gt; this.a = 1 (undefined + number -&gt; NaN)</span></span><br><span class="line">  <span class="built_in">console</span>.log(a + <span class="built_in">this</span>.a); <span class="comment">// NaN</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="string">&quot;2&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(a + <span class="built_in">this</span>.a); <span class="comment">// &quot;21&quot;</span></span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> name = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// &#x27;var name = 2&#x27; is hoisted here -&gt; var name = undefined</span></span><br><span class="line">  <span class="comment">/* Any global variable named `name` overwrites `window.name` pproperty.</span></span><br><span class="line"><span class="comment">  Also, before overwriting, value of `name` variable is passed to `String`</span></span><br><span class="line"><span class="comment">  to convert it to string and then it is overwritten. Since `symbol` can&#x27;t be converted to </span></span><br><span class="line"><span class="comment">  string thus if we declare global variable `name` as symbol then while converting it </span></span><br><span class="line"><span class="comment">  to `string`, TypeError will be thrown.</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="comment">// &#x27;this.name&#x27; is string -&gt; this.name = &quot;1&quot; (undefined + string -&gt; &quot;undefinedString&quot;)</span></span><br><span class="line">  <span class="built_in">console</span>.log(name + <span class="built_in">this</span>.name); <span class="comment">// &quot;undefined1&quot;</span></span><br><span class="line">  <span class="keyword">var</span> name = <span class="string">&quot;2&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(name + <span class="built_in">this</span>.name); <span class="string">&quot;21&quot;</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>



<h2 id="74-Typed-Array-length"><a href="#74-Typed-Array-length" class="headerlink" title="74. Typed Array length"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Typed-Array-length">74. Typed Array length</a></h2><h3 id="题目-73"><a href="#题目-73" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyArray</span> <span class="keyword">extends</span> <span class="title">Uint8Array</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">length</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">3</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr1 = <span class="keyword">new</span> MyArray(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr1.length)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = <span class="keyword">new</span> <span class="built_in">Uint8Array</span>(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr2.length)</span><br></pre></td></tr></table></figure>

<h3 id="答案-73"><a href="#答案-73" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">3</span><br><span class="line">10</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-72"><a href="#详细解析-72" class="headerlink" title="详细解析"></a>详细解析</h3><p>This is quite similar to <a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/array-length">this previous problem</a> but the difference being we are extending from <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array">Uint8Array typed array</a> that uses <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> and in this case <strong>Subclass constructors may over-ride it to change the constructor assignment</strong> [See this](<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species#:~:text=Subclass">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species#:~:text=Subclass</a> constructors may over-ride it to change the constructor assignment.)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyArray</span> <span class="keyword">extends</span> <span class="title">Uint8Array</span> </span>&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">length</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">3</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr1 = <span class="keyword">new</span> MyArray(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr1.length) <span class="comment">// 3 MyArray&#x27;s length is 3</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = <span class="keyword">new</span> <span class="built_in">Uint8Array</span>(<span class="number">10</span>)</span><br><span class="line"><span class="built_in">console</span>.log(arr2.length) <span class="comment">// Original Unit8Array will take in the arg</span></span><br></pre></td></tr></table></figure>



<h2 id="75-meaningless-calculation"><a href="#75-meaningless-calculation" class="headerlink" title="75. meaningless calculation"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/meaningless-calculation">75. meaningless calculation</a></h2><h3 id="题目-74"><a href="#题目-74" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> num = +((~~!+[])+(~~!+[])+[]+(~~!+[]))</span><br><span class="line"><span class="built_in">console</span>.log(num)</span><br></pre></td></tr></table></figure>

<h3 id="答案-74"><a href="#答案-74" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">21</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-73"><a href="#详细解析-73" class="headerlink" title="详细解析"></a>详细解析</h3><p>Few things to keep in mind,</p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">unary plus operator (+)</a> precedes its operand attempts to convert it into a number, if it isn’t already.</p>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT#description">bitwise NOT operator (~)</a> inverts the bits of its operand.</p>
<p>So basically,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">+[] <span class="comment">// 0 since Number([]) = 0</span></span><br><span class="line">!<span class="number">0</span> <span class="comment">// true since 0 is falsy</span></span><br><span class="line">~<span class="literal">true</span> <span class="comment">// -2</span></span><br><span class="line">~-<span class="number">2</span> <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// another way to think will be is that ~~ cancel out each other and Number(true) is 1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// If we use all this,</span></span><br><span class="line">(~~!+[]) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>

<p>In the case of unary operators, evaluation happens from Right to Left. Of course, the Grouping operator () is evaluated first. But the overall evaluation will happen from Left to Right. See <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table">Operator Precedence</a></p>
<p>Let’s break this down,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> num = +((~~!+[])+(~~!+[])+[]+(~~!+[]))</span><br><span class="line"></span><br><span class="line"><span class="comment">// We know that (~~!+[]) = 1</span></span><br><span class="line"><span class="comment">// num = +(1 + 1 + [] + 1)</span></span><br><span class="line"><span class="comment">// num = +(2 + [] + 1)</span></span><br><span class="line"><span class="comment">// since not all operands are number JS performs string concatenation, String([]) = &quot;&quot;</span></span><br><span class="line"><span class="comment">// num = +(&#x27;2&#x27; + &#x27;&#x27; + &#x27;1&#x27;) = +(&quot;21&quot;) = 21</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(num) <span class="comment">// 21</span></span><br></pre></td></tr></table></figure>



<h2 id="76-const"><a href="#76-const" class="headerlink" title="76. const"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/const">76. const</a></h2><h3 id="题目-75"><a href="#题目-75" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> a = b = c = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line">func()</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a, <span class="keyword">typeof</span> b, <span class="keyword">typeof</span> c)</span><br></pre></td></tr></table></figure>

<h3 id="答案-75"><a href="#答案-75" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;undefined&quot;</span>,<span class="string">&quot;number&quot;</span>,<span class="string">&quot;number&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-74"><a href="#详细解析-74" class="headerlink" title="详细解析"></a>详细解析</h3><p>In javascript, the assignment happens from right to left. So, <code>const</code> statement is only applicable to <code>a</code>, not <code>b</code> and <code>c</code>. All the other variables are considered Global without the var/let/const identifier, hence <code>b</code> and <code>c</code> will be globally scoped.</p>
<p>To visualize, think of it like</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = (b = (c = <span class="number">1</span>));</span><br><span class="line"><span class="comment">// which effectively becomes</span></span><br><span class="line"><span class="keyword">const</span> a = (<span class="built_in">window</span>.b = ( <span class="built_in">window</span>.c = <span class="number">1</span>))</span><br></pre></td></tr></table></figure>

<p>that’s why <code>a</code> is unavailable outside the function block, while <code>b</code> and <code>c</code> are 1; Hence, the output <code>undefined, number, number</code></p>
<p>See <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/41551270/is-there-a-way-to-do-multiple-assignment-and-initialization-with-block-scope">https://stackoverflow.com/questions/41551270/is-there-a-way-to-do-multiple-assignment-and-initialization-with-block-scope</a> for possible workarounds</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">const a=1, b=4,c=6; This defines all 3 variables with `const`.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">const a=b=c=3; This defines `b` &amp; `c` as global variable with value 3, whereas</span></span><br><span class="line"><span class="comment">`a` as block scoped variable with value 3.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">const a = (b=c=1,4); `b` &amp; `c` global variable with value `1` &amp; `a` block variable</span></span><br><span class="line"><span class="comment">with value 4.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">const a = (b=c=1); `b` &amp; `c` global variable with value `1` &amp; `a` block variable</span></span><br><span class="line"><span class="comment">with value `undefined`.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> a = (b = c = <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line">func();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a, <span class="keyword">typeof</span> b, <span class="keyword">typeof</span> c); <span class="comment">// undefined, number, number</span></span><br></pre></td></tr></table></figure>



<h2 id="77-parseInt-2"><a href="#77-parseInt-2" class="headerlink" title="77. parseInt 2"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/parseInt-2">77. parseInt 2</a></h2><h3 id="题目-76"><a href="#题目-76" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.00001</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.000001</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.0000001</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&quot;0x12&quot;</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&quot;1e2&quot;</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-76"><a href="#答案-76" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">0</span><br><span class="line">0</span><br><span class="line">1</span><br><span class="line">18</span><br><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-75"><a href="#详细解析-75" class="headerlink" title="详细解析"></a>详细解析</h3><p>Before converting a string to a number <code>parseInt</code> first converts a number to a string. If the number &gt;= 1e+21 or number &lt;= 1e-7 , it’s represented in its scientific notation.</p>
<p><code>1. &amp; 2.</code> are straightforward, the integer part is 0</p>
<p><code>3.</code> Since the number is equal to 1e-7, 0.0000001 gets converted to its scientific notation 1e-7. Now, as soon as parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 0.0000001.toString() becomes 1e-7</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">0.0000001</span>) <span class="comment">// becomes</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">1e-7</span>) <span class="comment">// so e-7 gets ignored and it returns only 1</span></span><br></pre></td></tr></table></figure>

<p><code>4.</code> If the input string begins with “0x” or “0X” (a zero, followed by lowercase or uppercase X), radix is assumed to be 16 and the rest of the string is parsed as a hexadecimal number. <code>0x12</code> in HEX is 18 in decimal</p>
<p><code>5.</code> Similar to 3. it ignores <code>e2</code> and returns 1</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* `parseInt` operate on string. Thus, it call casting function `String`</span></span><br><span class="line"><span class="comment">and pass its argument to it. </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Note: If number has more than 7 decimal digits then `String` convert it to</span></span><br><span class="line"><span class="comment">exponential. e.g.</span></span><br><span class="line"><span class="comment">    - String(0.000001) =&gt; &#x27;0.000001&#x27;</span></span><br><span class="line"><span class="comment">    - String(0.0000001) =&gt; &#x27;1e-7&#x27;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.00001</span>)); <span class="comment">// String(0.00001)=&gt;&#x27;0.00001&#x27; =&gt; 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.000001</span>)); <span class="comment">// String(0.000001) =&gt; &#x27;0.000001&#x27; =&gt; 0 </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="number">0.0000001</span>)); <span class="comment">// String(0.0000001) =&gt; &#x27;1e-7&#x27; =&gt; 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&quot;0x12&quot;</span>,<span class="number">16</span>)); <span class="comment">// 18 (parseInt output is always in decimal. )</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1 (parseInt can&#x27;t understand if it is exponential, it will stop at first alphabhet)</span></span><br><span class="line"><span class="comment">// assume parsing `1z4` so what will be output of parseInt? Again 1.</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&quot;1e2&quot;</span>)); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>



<h2 id="78-RegExp"><a href="#78-RegExp" class="headerlink" title="78. RegExp"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/RegExp">78. RegExp</a></h2><h3 id="题目-77"><a href="#题目-77" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;1&#x27;</span>]</span><br><span class="line"><span class="keyword">const</span> regExp = <span class="regexp">/^[a-z]$/gi</span></span><br><span class="line"><span class="keyword">const</span> chars = arr.filter(<span class="function"><span class="params">elem</span> =&gt;</span> regExp.test(elem))</span><br><span class="line"><span class="built_in">console</span>.log(chars)</span><br></pre></td></tr></table></figure>

<h3 id="答案-77"><a href="#答案-77" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">&quot;a&quot;</span>,<span class="string">&quot;c&quot;</span>]</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-76"><a href="#详细解析-76" class="headerlink" title="详细解析"></a>详细解析</h3><p>Intuitively, it seems that output should be <code>[&quot;a&quot;,&quot;b&quot;,&quot;c&quot;]</code> since these items match the regular expression.</p>
<p>But when a regex has the <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test#using_test_on_a_regex_with_the_global_flag">global flag</a> set, <code>test()</code> will advance the lastIndex of the regex. <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex">lastIndex</a> is a property of RegExp that specifies the index at which to start the next match.</p>
<p>Basically,</p>
<ol>
<li>As long as <code>test()</code> returns <code>true</code>, lastIndex will not reset—even when testing a different string!</li>
<li>When <code>test()</code> returns <code>false</code>, the calling regex’s lastIndex property will reset to 0.</li>
</ol>
<blockquote>
<p><code>/^[a-z]$/gi</code> 👉🏻 Any character from character set [a-z], <code>g</code> means global flag for multiple matches, <code>i</code> means character insensitive same as [a-zA-Z]</p>
</blockquote>
<p>So the loop effectively becomes,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">regExp.test(<span class="string">&#x27;a&#x27;</span>) <span class="comment">// true and it sets lastIndex = 1</span></span><br><span class="line">regExp.test(<span class="string">&#x27;b&#x27;</span>) <span class="comment">// false as the lastIndex i.e. staring point is not 0, lastIndex resets</span></span><br><span class="line">regExp.test(<span class="string">&#x27;c&#x27;</span>) <span class="comment">// true as lastIndex is 0 and regex satisfies</span></span><br><span class="line">regExp.test(<span class="string">&#x27;1&#x27;</span>) <span class="comment">// false </span></span><br></pre></td></tr></table></figure>

<p>So</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* When a regex has the global flag set, test() will advance the lastIndex of </span></span><br><span class="line"><span class="comment">the regex. Further calls to test(str) will resume searching str starting from </span></span><br><span class="line"><span class="comment">lastIndex. The lastIndex property will continue to increase each time test() </span></span><br><span class="line"><span class="comment">returns true.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">As long as test() returns true, lastIndex will not reset—even when testing a </span></span><br><span class="line"><span class="comment">different string!</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">const regex = /foo/g; // the &quot;global&quot; flag is set</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// regex.lastIndex is at 0</span></span><br><span class="line"><span class="comment">regex.test(&#x27;foo&#x27;)     // true</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// regex.lastIndex is now at 3</span></span><br><span class="line"><span class="comment">regex.test(&#x27;foo&#x27;)     // false</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// regex.lastIndex is at 0</span></span><br><span class="line"><span class="comment">regex.test(&#x27;barfoo&#x27;)  // true</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// regex.lastIndex is at 6</span></span><br><span class="line"><span class="comment">regex.test(&#x27;foobar&#x27;)  //false</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// regex.lastIndex is at 0</span></span><br><span class="line"><span class="comment">// (...and so on)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">&quot;a&quot; -&gt; true, increase index</span></span><br><span class="line"><span class="comment">&quot;b&quot; -&gt; false, reset index</span></span><br><span class="line"><span class="comment">&quot;c&quot; -&gt; true, increase index</span></span><br><span class="line"><span class="comment">&quot;1&quot; -&gt; false, reset index</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="string">&quot;a&quot;</span>, <span class="string">&quot;b&quot;</span>, <span class="string">&quot;c&quot;</span>, <span class="string">&quot;1&quot;</span>];</span><br><span class="line"><span class="keyword">const</span> regExp = <span class="regexp">/^[a-z]$/gi</span>;</span><br><span class="line"><span class="keyword">const</span> chars = arr.filter(<span class="function">(<span class="params">elem</span>) =&gt;</span> regExp.test(elem)); </span><br><span class="line"><span class="built_in">console</span>.log(chars); <span class="comment">// [&quot;a&quot;, &quot;c&quot;]</span></span><br></pre></td></tr></table></figure>



<h2 id="79-Equal-III"><a href="#79-Equal-III" class="headerlink" title="79. Equal III"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/equal-iii">79. Equal III</a></h2><h3 id="题目-78"><a href="#题目-78" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2.0</span> == <span class="string">&quot;2&quot;</span> == <span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&quot;1&quot;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-78"><a href="#答案-78" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-77"><a href="#详细解析-77" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here, it’ll convert the string and boolean values to number and then compare</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>(<span class="number">2.0</span>) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="string">&quot;2&quot;</span>) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">true</span>) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>

<p>As per <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table">Operator Precedence</a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality">equality operator</a> <code>==</code> attempts to convert and compare operands that are of different types and comparisons happen from Left to Right.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">2.0</span> == <span class="string">&quot;2&quot;</span> == <span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">true</span>) == <span class="string">&quot;1&quot;</span>) <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 == 2 == true == &quot;1&quot;</span></span><br><span class="line"><span class="comment">// true == true == &quot;1&quot;</span></span><br><span class="line"><span class="comment">// true == &quot;1&quot;</span></span><br><span class="line"><span class="comment">// 1 == 1</span></span><br><span class="line"><span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h2 id="80-Proxy-I"><a href="#80-Proxy-I" class="headerlink" title="80. Proxy I"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/proxy-i">80. Proxy I</a></h2><h3 id="题目-79"><a href="#题目-79" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line">obj.foo = <span class="number">1</span></span><br><span class="line">map.set(<span class="string">&#x27;foo&#x27;</span>, <span class="number">2</span>)</span><br><span class="line"><span class="built_in">console</span>.log(obj.foo)</span><br><span class="line"><span class="built_in">console</span>.log(map.get(<span class="string">&#x27;foo&#x27;</span>))</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> proxyObj = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj, &#123;&#125;)</span><br><span class="line"><span class="keyword">const</span> proxyMap = <span class="keyword">new</span> <span class="built_in">Proxy</span>(map, &#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(proxyObj.foo)</span><br><span class="line"><span class="built_in">console</span>.log(proxyMap.get(<span class="string">&#x27;foo&#x27;</span>))</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="答案-79"><a href="#答案-79" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">1</span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-78"><a href="#详细解析-78" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#description">Proxy object</a> allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties.</p>
<p>If a <code>handler</code> has not been defined, the default behavior is to forward the operation to the target, however that only applies to standard behaviors like property access, and not the internal slots of exotic objects.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">obj.foo = <span class="number">1</span>;</span><br><span class="line">map.set(<span class="string">&quot;foo&quot;</span>, <span class="number">2</span>);</span><br><span class="line"><span class="built_in">console</span>.log(obj.foo); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(map.get(<span class="string">&quot;foo&quot;</span>)); <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> proxyObj = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj, &#123;&#125;);</span><br><span class="line"><span class="keyword">const</span> proxyMap = <span class="keyword">new</span> <span class="built_in">Proxy</span>(map, &#123;&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(proxyObj.foo); <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">Many built-in objects, for example, Map, Set, Date, Promise and others make use </span></span><br><span class="line"><span class="comment">of so-called internal slots. These are like properties but reserved for internal, </span></span><br><span class="line"><span class="comment">specification-only purposes. For instance, Map stores items in the internal slot </span></span><br><span class="line"><span class="comment">[[MapData]]. Built-in methods access them directly, not via [[Get]]/[[Set]] </span></span><br><span class="line"><span class="comment">internal methods. So Proxy can’t intercept that. e.g.</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">let map = new Map();</span></span><br><span class="line"><span class="comment">let proxy = new Proxy(map, &#123;&#125;);</span></span><br><span class="line"><span class="comment">proxy.set(&#x27;name&#x27;, &#x27;Pravin&#x27;); // Error</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">console</span>.log(proxyMap.get(<span class="string">&quot;foo&quot;</span>)); <span class="comment">// TypeError</span></span><br></pre></td></tr></table></figure>

<p>⚠️ Details are pretty technical 🤯</p>
<p>If the <code>target</code> does not have a [<a target="_blank" rel="noopener" href="https://262.ecma-international.org/6.0/#sec-map.prototype.get">[MapData]] internal slot</a>, throw a TypeError exception. This is also explained <a target="_blank" rel="noopener" href="https://262.ecma-international.org/6.0/#sec-proxy-object-internal-methods-and-internal-slots">here</a></p>
<p>Similar behavior in ES6 <code>Set</code> is explained at <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/43927933/why-is-set-incompatible-with-proxy">https://stackoverflow.com/questions/43927933/why-is-set-incompatible-with-proxy</a></p>
<h2 id="81-setTimeout-II"><a href="#81-setTimeout-II" class="headerlink" title="81. setTimeout II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/setTimeout-2">81. setTimeout II</a></h2><h3 id="题目-80"><a href="#题目-80" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> num</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  num = i</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(num)</span><br><span class="line">  &#125;, <span class="number">100</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="答案-80"><a href="#答案-80" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">4</span><br><span class="line">4</span><br><span class="line">4</span><br><span class="line">4</span><br><span class="line">4</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-79"><a href="#详细解析-79" class="headerlink" title="详细解析"></a>详细解析</h3><p>Here, <code>num</code> behaves like <code>var</code> The variable <code>num</code> is actually declared within the for loop and the setTimeout’s inner function accesses it. So when the for loop is done running, each of the inner functions refers to the same variable <code>num</code>, which at the end of the loop is equal to 4</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  num = i</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(num) <span class="comment">// 4 =&gt; five times (it is same as using var because here `num` has global scope)</span></span><br><span class="line">  &#125;, <span class="number">100</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 4</span></span><br></pre></td></tr></table></figure>



<h2 id="82-Proxy-II"><a href="#82-Proxy-II" class="headerlink" title="82. Proxy II"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Proxy-II">82. Proxy II</a></h2><h3 id="题目-81"><a href="#题目-81" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dev</span> </span>&#123;</span><br><span class="line">  #name</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.#name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">name</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.#name;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dev = <span class="keyword">new</span> Dev(<span class="string">&#x27;BFE&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(dev.name)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> proxyDev = <span class="keyword">new</span> <span class="built_in">Proxy</span>(dev, &#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(proxyDev.name)</span><br></pre></td></tr></table></figure>

<h3 id="答案-81"><a href="#答案-81" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;BFE&quot;</span></span><br><span class="line">Error</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-80"><a href="#详细解析-80" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Private class members</a> can be created by using a hash # prefix. Private fields are accessible on the class constructor from inside the class declaration itself and is not accessible from the derived Subclass.</p>
<p>A proxy cannot read private member <code>#name</code> from the <code>dev</code> object.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dev</span> </span>&#123;</span><br><span class="line">  #name</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.#name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">name</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.#name;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dev = <span class="keyword">new</span> Dev(<span class="string">&#x27;BFE&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(dev.name) <span class="comment">// &quot;BFE&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> proxyDev = <span class="keyword">new</span> <span class="built_in">Proxy</span>(dev, &#123;&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(proxyDev.name) <span class="comment">// TypeError: can&#x27;t read private property</span></span><br></pre></td></tr></table></figure>



<h2 id="83-Plus-Plus"><a href="#83-Plus-Plus" class="headerlink" title="83. Plus Plus"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Plus-Plus">83. Plus Plus</a></h2><h3 id="题目-82"><a href="#题目-82" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span> + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span> + + <span class="number">1</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + + <span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span> + <span class="string">&#x27;c&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span> + + <span class="string">&#x27;c&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-82"><a href="#答案-82" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">2</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">3</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line"><span class="string">&quot;111&quot;</span></span><br><span class="line"><span class="string">&quot;aNaN&quot;</span></span><br><span class="line"><span class="string">&quot;aNaNc&quot;</span></span><br><span class="line"><span class="string">&quot;aNaNNaN&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-81"><a href="#详细解析-81" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The unary plus operator (+) precedes its operand and attempts to convert it into a <code>number</code> if it isn’t already. If it’s not possible it returns <code>NaN</code></p>
</blockquote>
<p>In mathematical operators, <code>+</code> works on both numbers and strings (used in string concatenation). Hence, if any of the operands is not a number, using <code>+</code> converts all operand/s to string and concatenates.</p>
<p>The unary operator has higher precedence over the addition operator.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="number">1</span>) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span>) <span class="comment">// 1 + (+1) = 1 + 1 = 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span> + <span class="number">1</span>) <span class="comment">// 1 + (+1) + 1 = 1 + 1 + 1 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="number">1</span> + + <span class="number">1</span>) <span class="comment">// 1 + (+1) + (+1) =  1 + 1 + 1 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + + <span class="number">1</span>) <span class="comment">// 1 + (+(+1)) = 1 + (+1) = 1 + 1 = 2</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + + <span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span>) <span class="comment">// 1 + (+&#x27;1&#x27;) + (+&#x27;1&#x27;) = 1 + 1 + 1 = 3</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span> + + <span class="string">&#x27;1&#x27;</span>) <span class="comment">// &quot;1&quot; + (+&#x27;1&#x27;) + (+&#x27;1&#x27;) = &quot;1&quot; + 1 + 1 = &quot;1&quot; + &quot;1&quot; + &quot;1&quot; = &quot;111&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span>) <span class="comment">// &quot;a&quot; + (+&#x27;b&#x27;) = a + &quot;NaN&quot; = &quot;aNaN&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span> + <span class="string">&#x27;c&#x27;</span>) <span class="comment">// &quot;a&quot; + (+&#x27;b&#x27;) +&#x27;c&#x27; = a + &quot;NaN&quot;  + &quot;c&quot; = &quot;aNaNc&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;a&#x27;</span> + + <span class="string">&#x27;b&#x27;</span> + + <span class="string">&#x27;c&#x27;</span>) <span class="comment">// &quot;a&quot; + (+&#x27;b&#x27;) + (+&#x27;c&#x27;) = a + &quot;NaN&quot;  + &quot;NaN&quot; = &quot;aNaNNaN&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="84-Array-prototype-sort"><a href="#84-Array-prototype-sort" class="headerlink" title="84. Array.prototype.sort()"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/Array-prototype-sort">84. Array.prototype.sort()</a></h2><h3 id="题目-83"><a href="#题目-83" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = [<span class="number">999</span>, <span class="number">1111</span>, <span class="number">111</span>, <span class="number">2</span>, <span class="number">0</span>] </span><br><span class="line"><span class="keyword">const</span> b = a.sort()</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br></pre></td></tr></table></figure>

<h3 id="答案-83"><a href="#答案-83" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">2</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">3</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line"><span class="string">&quot;111&quot;</span></span><br><span class="line"><span class="string">&quot;aNaN&quot;</span></span><br><span class="line"><span class="string">&quot;aNaNc&quot;</span></span><br><span class="line"><span class="string">&quot;aNaNNaN&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-82"><a href="#详细解析-82" class="headerlink" title="详细解析"></a>详细解析</h3><p><code>Array.sort()</code> method sorts the elements of an array in place and returns the sorted array</p>
<blockquote>
<p>Note that the array is sorted in place, and no copy is made.</p>
</blockquote>
<p>This explains why both <code>a</code> and <code>b</code> get sorted. <code>a</code> is sorted in place while this sorted array is then assigned to <code>b</code>.</p>
<p>As to why numbers don’t appear in order, remember that sort expects a compare function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character’s Unicode code point value.</p>
<p>When compared in strings, <code>&quot;111&quot; &lt; &quot;2&quot;</code>, <code>&quot;1111&quot; &lt; &quot;999&quot;</code>, etc.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// In global excution environment `a` variable created and it points to an array object</span></span><br><span class="line"><span class="keyword">const</span> a = [<span class="number">999</span>, <span class="number">1111</span>, <span class="number">111</span>, <span class="number">2</span>, <span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// `a` pointed array object is sorted. Further its location is also stored in `b`.</span></span><br><span class="line"><span class="comment">// Now, `a` &amp; `b` both point to same object.</span></span><br><span class="line"><span class="keyword">const</span> b = a.sort();</span><br><span class="line"></span><br><span class="line"><span class="comment">// both prints same object</span></span><br><span class="line"><span class="built_in">console</span>.log(a);  <span class="comment">// [ 0, 111, 1111, 2, 999 ]</span></span><br><span class="line"><span class="built_in">console</span>.log(b);  <span class="comment">// [ 0, 111, 1111, 2, 999 ]</span></span><br></pre></td></tr></table></figure>



<h2 id="85-String-raw"><a href="#85-String-raw" class="headerlink" title="85. String.raw()"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/String-raw">85. String.raw()</a></h2><h3 id="题目-84"><a href="#题目-84" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw<span class="string">`BFE\n.<span class="subst">$&#123;<span class="string">&#x27;dev&#x27;</span>&#125;</span>`</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw(&#123;<span class="attr">raw</span>: <span class="string">&#x27;BFE&#x27;</span>&#125;, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;v&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// when you enter your input in text box below</span></span><br><span class="line"><span class="comment">// keep in mind it is treated as raw string and will be escaped</span></span><br></pre></td></tr></table></figure>

<h3 id="答案-84"><a href="#答案-84" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;BFE\n.dev&quot;</span></span><br><span class="line"><span class="string">&quot;BdFeE&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-83"><a href="#详细解析-83" class="headerlink" title="详细解析"></a>详细解析</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* static `String.raw()` method is a tag function of template literals. Two</span></span><br><span class="line"><span class="comment">types of argument can be passed to it</span></span><br><span class="line"><span class="comment">  - String.raw(callSite, ...substitutions)</span></span><br><span class="line"><span class="comment">  - String.raw`templateString`  </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">It&#x27;s used to get the raw string form of template literals, that is, </span></span><br><span class="line"><span class="comment">substitutions (e.g. $&#123;foo&#125;) are processed, but escapes (e.g. \n) are not */</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw<span class="string">`BFE\n.<span class="subst">$&#123;<span class="string">&quot;dev&quot;</span>&#125;</span>`</span>); <span class="comment">// BFE\n.dev</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* here it is used in form of `String.raw(callSite, ...substitutions)`</span></span><br><span class="line"><span class="comment">thus each of substitute arguments will be placed between callSite letters. */</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw(&#123; <span class="attr">raw</span>: <span class="string">&quot;BFE&quot;</span> &#125;, <span class="string">&quot;d&quot;</span>, <span class="string">&quot;e&quot;</span>, <span class="string">&quot;v&quot;</span>)); <span class="comment">// BdFeV (we can&#x27;t place `v` because there is not space available.)</span></span><br></pre></td></tr></table></figure>

<p>The static <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw#description">String.raw()</a> method is a tag function of template literals. It’s used to get the raw string form of template literals, that is, substitutions (e.g. ${foo}) are processed, but escapes (e.g. \n) are not. Note that it works just like the default template function and performs string concatenation. The important difference is that it’ll not escape characters.</p>
<p>Example,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;BFE\ndev&quot;</span>) <span class="comment">// \n gets escaped</span></span><br><span class="line"><span class="comment">// BFE</span></span><br><span class="line"><span class="comment">// dev</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`BFE\ndev`</span>) <span class="comment">// \n gets escaped</span></span><br><span class="line"><span class="comment">// BFE</span></span><br><span class="line"><span class="comment">// dev</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw<span class="string">`BFE\ndev`</span>) <span class="comment">// \n remains as it is</span></span><br><span class="line"><span class="comment">// BFE\ndev</span></span><br></pre></td></tr></table></figure>

<p><code>String.raw()</code> works like an interweaving function. The first argument is an object with a <code>raw</code> property whose value is an iterable(could be a string or an array) representing the separated strings in the template literal. The rest of the arguments are the substitutions. Extra substitutions are ignored</p>
<p>Example,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// using array</span></span><br><span class="line"><span class="built_in">String</span>.raw(&#123; <span class="attr">raw</span>: [<span class="number">0</span>,<span class="number">2</span>,<span class="number">4</span>] &#125;, <span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>) <span class="comment">// &quot;01234&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// using string</span></span><br><span class="line"><span class="built_in">String</span>.raw(&#123; <span class="attr">raw</span>: <span class="string">&#x27;024&#x27;</span> &#125;, <span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>) <span class="comment">// &quot;01234&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="86-setTimeout-III"><a href="#86-setTimeout-III" class="headerlink" title="86. setTimeout III"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/setTimeout-III">86. setTimeout III</a></h2><h3 id="题目-85"><a href="#题目-85" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> func = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  func = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(func, <span class="number">100</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-85"><a href="#答案-85" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-84"><a href="#详细解析-84" class="headerlink" title="详细解析"></a>详细解析</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout">setTimeout()</a> method sets a timer that executes a function or specified piece of code once the timer expires.</p>
<p>Here, the <code>func</code> is changed inside the first setimeout but since this is part of the callback it will not execute until the first setTimeout is invoked. That is why, the original <code>func</code> is passed as a reference to the second timeout which eventually gets invoked after 100ms logging 1</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> func = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//1. this is queued in task queue</span></span><br><span class="line"><span class="comment">//3. `func` starts pointing to new callable object</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  func = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//2. this is queued in task queue</span></span><br><span class="line"><span class="comment">//4. callback definition of this function doesn&#x27;t change. It remain </span></span><br><span class="line"><span class="comment">// same whatever was passed initially. Thus it prints `1`</span></span><br><span class="line"><span class="built_in">setTimeout</span>(func, <span class="number">100</span>);</span><br></pre></td></tr></table></figure>



<h2 id="87-instanceOf-2"><a href="#87-instanceOf-2" class="headerlink" title="87. instanceOf 2"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/instanceOf-2">87. instanceOf 2</a></h2><h3 id="题目-86"><a href="#题目-86" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span> <span class="keyword">instanceof</span> <span class="built_in">Function</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span> <span class="keyword">instanceof</span> <span class="built_in">Function</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-86"><a href="#答案-86" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-85"><a href="#详细解析-85" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.</p>
</blockquote>
<p>Simply put,</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Function</span> <span class="keyword">instanceof</span> <span class="built_in">Object</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// Object.getPrototypeOf(Function) is not equal to Object.prototype</span></span><br><span class="line"><span class="comment">// it goes further in chain</span></span><br><span class="line"><span class="comment">// Object.getPrototypeOf(Object.getPrototypeOf((Function)) is equal to Object.prototype</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span> <span class="keyword">instanceof</span> <span class="built_in">Function</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// Object.getPrototypeOf(Object) is equal to Function.prototype</span></span><br></pre></td></tr></table></figure>

<p>See more insightful answers on this thread <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/23622695/why-in-javascript-both-object-instanceof-function-and-function-instanceof-obj">https://stackoverflow.com/questions/23622695/why-in-javascript-both-object-instanceof-function-and-function-instanceof-obj</a></p>
<h2 id="88-try…catch"><a href="#88-try…catch" class="headerlink" title="88. try…catch"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/try-catch">88. try…catch</a></h2><h3 id="题目-87"><a href="#题目-87" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="string">&#x27;a&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> &#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="string">&#x27;a1&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="string">&#x27;b&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> (b) &#123;</span><br><span class="line">  <span class="keyword">var</span> b = <span class="string">&#x27;b1&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">  <span class="keyword">var</span> c = <span class="string">&#x27;c1&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(c)</span><br></pre></td></tr></table></figure>

<h3 id="答案-87"><a href="#答案-87" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;a1&quot;</span></span><br><span class="line"><span class="string">&quot;b&quot;</span></span><br><span class="line"><span class="string">&quot;c1&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-86"><a href="#详细解析-86" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#description">try…catch</a> statement marks a <code>try</code> block and a <code>catch</code> block. If the code in the <code>try</code> block throws an exception then the code in the <code>catch</code> block will be executed. In all these examples, we are throwing an exception in <code>try</code> which is why the control immediately goes to the <code>catch</code> block.</p>
<p>The important thing to know is that the catch-block specifies an identifier that holds the value of the exception; <strong>this value is only available in the scope of the catch-block</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">&#x27;a&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> &#123; <span class="comment">// no local variable being used</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="string">&#x27;a1&#x27;</span> <span class="comment">// overwrites outer varibale a, redeclaring global a</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// a1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="string">&#x27;b&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> (b) &#123; <span class="comment">// local variable b references the passed error</span></span><br><span class="line">  <span class="keyword">var</span> b = <span class="string">&#x27;b1&#x27;</span> <span class="comment">// No longer pointing to the global variable, its a locally scoped variable only</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// b</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&#x27;BFE.dev&#x27;</span>)</span><br><span class="line">&#125; <span class="keyword">catch</span> (error) &#123; <span class="comment">// local variable error references the passed error</span></span><br><span class="line">  <span class="keyword">var</span> c = <span class="string">&#x27;c1&#x27;</span> <span class="comment">// overwrites outer variable c, redeclaring global c</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(c) <span class="comment">// c1</span></span><br></pre></td></tr></table></figure>

<ol>
<li>We have just written <code>catch</code> and are not even capturing the error parameter so <code>var a</code> declared inside actually becomes global and overwrites outer <code>a</code> hence printing <code>a1</code> later</li>
<li>We have written <code>catch(b)</code> which means we are using <code>b</code> to hold the exception value which is only available locally inside this catch block. Hence, even after declaring <code>b</code> inside, the global value remains unchanged. Thus, printing <code>b</code></li>
<li>We have written <code>catch(error)</code> and are using <code>error</code> variable to capture the error value , so <code>error</code> is a locally scoped variable but <code>c</code> is not. Hence, similar to 1. <code>var c</code> declared inside actually becomes global and overwrites outer <code>c</code> hence printing <code>c1</code> later.</li>
</ol>
<h2 id="89-let"><a href="#89-let" class="headerlink" title="89. let"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/let">89. let</a></h2><h3 id="题目-88"><a href="#题目-88" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> foo = <span class="function">() =&gt;</span> a</span><br><span class="line">  <span class="keyword">let</span> a = <span class="number">2</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(foo())</span><br><span class="line">&#125;())</span><br></pre></td></tr></table></figure>

<h3 id="答案-88"><a href="#答案-88" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-87"><a href="#详细解析-87" class="headerlink" title="详细解析"></a>详细解析</h3><p>The answer is 2 I think that we can image function foo’s scope chain as below:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[foo.AO , IIFE.AO , globalContext.VO]</span><br></pre></td></tr></table></figure>

<p>when foo return a , it will find a in foo.AO where it is 2</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> foo = <span class="function">() =&gt;</span> a</span><br><span class="line">  <span class="keyword">let</span> a = <span class="number">2</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(foo()) <span class="comment">// 2</span></span><br><span class="line">&#125;())</span><br></pre></td></tr></table></figure>

<p>Here, inside the <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a> the function foo simply returns <code>a</code>. Whenever we execute it, it’ll return the value of <code>a</code> defined at that point.</p>
<p>In this example, even though <code>a</code> is assigned a value 2 after <code>foo</code> is declared it is still before <code>foo</code> is invoked. Thus, at the time of execution it prints 2</p>
<h2 id="90-array-keys"><a href="#90-array-keys" class="headerlink" title="90. array keys"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/array-keys">90. array keys</a></h2><h3 id="题目-89"><a href="#题目-89" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([,]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([<span class="number">1</span>,,<span class="number">2</span>]))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([...[<span class="number">1</span>,,<span class="number">2</span>]]))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="答案-89"><a href="#答案-89" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">&quot;length&quot;</span>]</span><br><span class="line">[<span class="string">&quot;length&quot;</span>]</span><br><span class="line">[<span class="string">&quot;0&quot;</span>,<span class="string">&quot;2&quot;</span>,<span class="string">&quot;length&quot;</span>]</span><br><span class="line">[<span class="string">&quot;0&quot;</span>,<span class="string">&quot;1&quot;</span>,<span class="string">&quot;2&quot;</span>,<span class="string">&quot;length&quot;</span>]</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-88"><a href="#详细解析-88" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The static <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys">Reflect.ownKeys()</a> method returns an array of the target object’s own property keys.</p>
</blockquote>
<p>Arrays under the hood in JavaScript are Objects. Their keys are numbers, and their values are the elements. By default, all arrays also have a property <code>length</code> that reflects the number of elements in that array. In the case of a sparse array, holes do not add the corresponding key to the array.</p>
<p>Also, the <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread operator</a> converts these holes to <code>undefined</code></p>
<p><code>1.</code> Its an empty array so answer only contains `length</p>
<p><code>2.</code> This array [,] is also an empty sparse array hence holes are ignored</p>
<p><code>3.</code> [1,,2] has values defined at index 0 and 2, hence it prints [“0”,”2”,”length”]</p>
<p><code>4.</code> Using Spread Operator changes the input array to [1,undefined,2] thus all the keys give following output [“0”,”1”,”2”,”length”]</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([])) <span class="comment">// [&quot;length&quot;]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([,])) <span class="comment">// [&quot;length&quot;]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([<span class="number">1</span>,,<span class="number">2</span>])) <span class="comment">// [&quot;0&quot;,&quot;2&quot;,&quot;length&quot;]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Reflect</span>.ownKeys([...[<span class="number">1</span>,,<span class="number">2</span>]])) <span class="comment">// [&quot;0&quot;,&quot;1&quot;,&quot;2&quot;,&quot;length&quot;]</span></span><br></pre></td></tr></table></figure>



<h2 id="91-largest-Array-index"><a href="#91-largest-Array-index" class="headerlink" title="91. largest Array index"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/largest-Array-index">91. largest Array index</a></h2><h3 id="题目-90"><a href="#题目-90" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = []</span><br><span class="line">arr[(<span class="number">2</span> ** <span class="number">32</span>) - <span class="number">2</span>] = <span class="number">1</span></span><br><span class="line">arr[(<span class="number">2</span> ** <span class="number">32</span>) - <span class="number">1</span>] = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.at(-<span class="number">1</span>))</span><br></pre></td></tr></table></figure>

<h3 id="答案-90"><a href="#答案-90" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">1</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-89"><a href="#详细解析-89" class="headerlink" title="详细解析"></a>详细解析</h3><p>The <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at">at()</a> method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array. For the last item <code>array[array.length-1]</code>, you can also call <code>array.at(-1)</code></p>
<p>JavaScript arrays are zero-based and use 32-bit indexes: the index of the first element is 0, and the highest possible index is 4294967294 (2^32 − 2) which we have assigned as <code>1</code></p>
<p>Accessing, <code>arr.at(-1)</code> thus returns the last element <code>1</code>.</p>
<p>Also, note that <code>arr[2^32 - 1] = 2</code> does store 2 at that index however since its more than the max possible length it cannot be accessed by <code>at</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = []</span><br><span class="line">arr[(<span class="number">2</span> ** <span class="number">32</span>) - <span class="number">2</span>] = <span class="number">1</span></span><br><span class="line">arr[(<span class="number">2</span> ** <span class="number">32</span>) - <span class="number">1</span>] = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.at(-<span class="number">1</span>)) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>



<h2 id="92-NaN"><a href="#92-NaN" class="headerlink" title="92. NaN"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/NaN">92. NaN</a></h2><h3 id="题目-91"><a href="#题目-91" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>))</span><br><span class="line"><span class="built_in">console</span>.log([<span class="literal">NaN</span>].indexOf(<span class="literal">NaN</span>))</span><br><span class="line"><span class="built_in">console</span>.log([<span class="literal">NaN</span>].includes(<span class="literal">NaN</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(<span class="literal">NaN</span>, <span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="literal">NaN</span>, <span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="literal">NaN</span>, <span class="literal">Infinity</span>))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="答案-91"><a href="#答案-91" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line">-1</span><br><span class="line"><span class="literal">true</span></span><br><span class="line">NaN</span><br><span class="line">NaN</span><br><span class="line">NaN</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-90"><a href="#详细解析-90" class="headerlink" title="详细解析"></a>详细解析</h3><blockquote>
<p>The global <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> property is a value representing Not-A-Number.</p>
</blockquote>
<p><code>1.</code> and <code>2.</code> NaN compares unequal (via both == and ===) to any other value <strong>including to another NaN value</strong>.</p>
<p><code>3.</code> Object.is() determines whether two values are the same value and returns true when we compare NaN</p>
<p><code>4.</code> and <code>5.</code> <strong>indexOf</strong> uses <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#strict_equality_using">Strict Equality Comparison</a> and thus <code>[NaN].indexOf(NaN) === -1</code> , <strong>array.includes</strong> uses <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality">SameValueZero comparison</a> algorithm , thus making <code>[NaN].includes(NaN)</code> true.</p>
<p><code>6.</code> , <code>7.</code> and <code>8.</code> The Math.max() and Math.min() functions return <code>NaN</code> if any parameter isn’t a number and can’t be converted into one (of course NaN cannot be converted into a number).</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span>) <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>)) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="literal">NaN</span>].indexOf(<span class="literal">NaN</span>)) <span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log([<span class="literal">NaN</span>].includes(<span class="literal">NaN</span>)) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(<span class="literal">NaN</span>, <span class="number">1</span>)) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="literal">NaN</span>, <span class="number">1</span>)) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="literal">NaN</span>, <span class="literal">Infinity</span>)) <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>



<h2 id="93-string"><a href="#93-string" class="headerlink" title="93. string"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/string">93. string</a></h2><h3 id="题目-92"><a href="#题目-92" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="string">&#x27;bfe.dev&#x27;</span></span><br><span class="line">a[<span class="number">0</span>] = <span class="string">&#x27;c&#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br></pre></td></tr></table></figure>

<h3 id="答案-92"><a href="#答案-92" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;bfe.dev&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-91"><a href="#详细解析-91" class="headerlink" title="详细解析"></a>详细解析</h3><p>Starting from ECMAScript 5, a string can be treated as an array-like object, where individual characters correspond to a numerical index.</p>
<p>However, when using bracket notation for character access, <strong>attempting to delete or assign a value to these properties will not succeed.</strong> The properties involved are neither writable nor configurable.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="string">&#x27;bfe.dev&#x27;</span></span><br><span class="line">a[<span class="number">0</span>] = <span class="string">&#x27;c&#x27;</span> <span class="comment">// this will make no difference</span></span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// &quot;bfe.dev&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="94-emoji"><a href="#94-emoji" class="headerlink" title="94. emoji"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/emoji">94. emoji</a></h2><h3 id="题目-93"><a href="#题目-93" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;👍&#x27;</span>.length)</span><br></pre></td></tr></table></figure>

<h3 id="答案-93"><a href="#答案-93" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-92"><a href="#详细解析-92" class="headerlink" title="详细解析"></a>详细解析</h3><p>JavaScript strings are represented using UTF-16 code units. Each code unit can be used to represent a code point in the [U+0000, U+FFFF] range – also known as the “basic multilingual plane” (BMP).</p>
<p>For code points beyond U+FFFF, you’d represent them as a surrogate pair. That is to say, two contiguous code units. For instance, the emoji ‘👍’ code point is represented with the ‘\uD83D\uDC4D’ contiguous code units.</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">String.length</a> property returns the number of code units in the string. While this is usually the same as character length, using characters that are outside the BMP([U+0000, U+FFFF] range) can return a different length</p>
<p>If you’re curious, <a target="_blank" rel="noopener" href="https://ponyfoo.com/articles/es6-strings-and-unicode-in-depth#unicode">Read this</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;👍&#x27;</span>.length) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>



<h2 id="95-number-format"><a href="#95-number-format" class="headerlink" title="95. number format"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/number-format">95. number format</a></h2><h3 id="题目-94"><a href="#题目-94" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript Quiz from BFE.dev </span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">017</span> - <span class="number">011</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">018</span> - <span class="number">011</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">019</span> - <span class="number">011</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-94"><a href="#答案-94" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">6</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td></tr></table></figure>

<h3 id="详细解析-93"><a href="#详细解析-93" class="headerlink" title="详细解析"></a>详细解析</h3><p>A leading zero represents an octal (base 8) number unless any digit is 8 or 9, in which case, the leading 0 is ignored</p>
<p>Here, 017 and 011 are valid octal numbers while 018 and 019 are treated as decimal. We have, 017 = 15 and 011 = 9 in decimal system</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">017</span> - <span class="number">011</span>) <span class="comment">// 15 - 9 = 6</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">018</span> - <span class="number">011</span>) <span class="comment">// 18 - 9 = 9</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">019</span> - <span class="number">011</span>) <span class="comment">// 19 - 9 = 10</span></span><br></pre></td></tr></table></figure>



<h2 id="96-comparison"><a href="#96-comparison" class="headerlink" title="96. comparison"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/comparison">96. comparison</a></h2><h3 id="题目-95"><a href="#题目-95" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript quiz from BFE.dev</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="number">9</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="string">&#x27;9&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span> &gt; <span class="number">9</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span> &gt; <span class="string">&#x27;9&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="答案-95"><a href="#答案-95" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-94"><a href="#详细解析-94" class="headerlink" title="详细解析"></a>详细解析</h3><p>Reference to <a target="_blank" rel="noopener" href="https://zh.javascript.info/comparison">https://zh.javascript.info/comparison</a> The number is compared directly. Otherwise, convert the other to number if possible. The last one, compare by dictionary order.</p>
<p>When using <code>&gt;</code> to compare two operands, if either operand is a <code>number</code>, Javascript will first convert the string to its equivalent number and then numerically compare.</p>
<p>Only when both operands are <code>string</code>, they are compared lexicographically. i.e. character by character until they are not equal or there aren’t any characters left. The first character of ‘10’ is less than the first character of ‘9’ hence ‘10’ is &lt; ‘9’</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="number">9</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="string">&#x27;9&#x27;</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span> &gt; <span class="number">9</span>) <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;10&#x27;</span> &gt; <span class="string">&#x27;9&#x27;</span>) <span class="comment">// false</span></span><br></pre></td></tr></table></figure>



<h2 id="97-this-V"><a href="#97-this-V" class="headerlink" title="97. this V"></a><a target="_blank" rel="noopener" href="https://bigfrontend.dev/quiz/this-V">97. <code>this</code> V</a></h2><h3 id="题目-96"><a href="#题目-96" class="headerlink" title="题目"></a>题目</h3><p>What does the code snippet to the right output by <code>console.log</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// This is a JavaScript quiz from BFE.dev</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  prefix: <span class="string">&#x27;BFE&#x27;</span>,</span><br><span class="line">  list: [<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>],</span><br><span class="line">  <span class="function"><span class="title">log</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.list.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.prefix + item);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.log();</span><br></pre></td></tr></table></figure>

<h3 id="答案-96"><a href="#答案-96" class="headerlink" title="答案"></a>答案</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;undefined1&quot;</span></span><br><span class="line"><span class="string">&quot;undefined2&quot;</span></span><br><span class="line"><span class="string">&quot;undefined3&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="详细解析-95"><a href="#详细解析-95" class="headerlink" title="详细解析"></a>详细解析</h3><p>Please pay attention to the callback of <code>forEach</code>, it isn’t an arrow function, so the <code>this</code> inside of callback point to the <code>window</code>, so <code>window.prefix</code> is equal to <code>undefined</code>.</p>
<p>Here, <code>this</code> inside the <code>log</code> function will point to <code>obj</code> as it’s a normal function. Thus, <code>this.list.forEach</code> loops over the array [‘1’,’2’,’3’].</p>
<p>However, inside the <code>forEach</code> callback function, since it’s not the <code>obj</code> invoking callback, <code>this</code> will not point to <code>obj</code>. Rather, it will refer to <code>window</code> hence <code>this.prefix</code> will be <code>undefined</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  prefix: <span class="string">&#x27;BFE&#x27;</span>,</span><br><span class="line">  list: [<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>],</span><br><span class="line">  <span class="function"><span class="title">log</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.list.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">item</span>) </span>&#123;</span><br><span class="line">      <span class="comment">// the `this` here is point to the `window`, not the `obj`</span></span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">this</span>.prefix + item);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.log();</span><br><span class="line"></span><br><span class="line"><span class="comment">// &quot;undefined1&quot;</span></span><br><span class="line"><span class="comment">// &quot;undefined2&quot;</span></span><br><span class="line"><span class="comment">// &quot;undefined3&quot;</span></span><br></pre></td></tr></table></figure>
    </div>

    
    
    
      
<div>
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
              <a href="/tags/bigfrontend/" rel="tag"><i class="fa fa-tag"></i> bigfrontend</a>
              <a href="/tags/%E9%A2%98%E5%BA%93/" rel="tag"><i class="fa fa-tag"></i> 题库</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/06/06/Rollup%20%E2%80%94%E2%80%94%20%E9%80%82%E5%90%88%E6%A1%86%E6%9E%B6%E5%92%8C%E7%B1%BB%E5%BA%93%E4%BD%BF%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%99%A8/" rel="prev" title="Rollup——适合框架和类库使用的模块打包器">
      <i class="fa fa-chevron-left"></i> Rollup——适合框架和类库使用的模块打包器
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/06/17/bigfrontend%E7%9A%84Coding%20Problems%E8%AE%A8%E8%AE%BA/" rel="next" title="bigfrontend的Coding Problems讨论">
      bigfrontend的Coding Problems讨论 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA"><span class="nav-text">输入输出</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-Promise-order"><span class="nav-text">1. Promise order</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90"><span class="nav-text">详细解析</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Part-1-Sync-Code"><span class="nav-text">Part 1 - Sync Code</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Part-2-Async-amp-Sync"><span class="nav-text">Part 2 - Async &amp; Sync</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-Promise-executor"><span class="nav-text">2. Promise executor</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-1"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-1"><span class="nav-text">答案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-Promise-then-callbacks"><span class="nav-text">3. Promise then callbacks</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-2"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-2"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-1"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-Promise-then-callbacks-II"><span class="nav-text">4. Promise then callbacks II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-3"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-3"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-2"><span class="nav-text">详细解析</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-finally-never-receive-an-argument"><span class="nav-text">1. finally() never receive an argument</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-Normal-return-value-in-finally-won%E2%80%99t-make-effect-on-promise-object"><span class="nav-text">2. Normal return value in finally won’t make effect on promise object</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-throw-Error-in-finally"><span class="nav-text">3. throw Error in finally()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-Order-of-then-amp-catch"><span class="nav-text">4. Order of then() &amp; catch()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-Full-solution-of-original-problem"><span class="nav-text">5. Full solution of original problem</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Final-Output"><span class="nav-text">Final Output:</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-block-scope"><span class="nav-text">5. block scope</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-4"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-4"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-3"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-Arrow-Function"><span class="nav-text">6. Arrow Function</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-5"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-5"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-4"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-Increment-Operator"><span class="nav-text">7. Increment Operator</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-6"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-6"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-5"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-Implicit-Coercion-I"><span class="nav-text">8. Implicit Coercion I</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-7"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-7"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-6"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-null-and-undefined"><span class="nav-text">9. null and undefined</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-8"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-8"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-7"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-Equal"><span class="nav-text">10. Equal</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-9"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-9"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-8"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-Implicit-Coercion-II"><span class="nav-text">11. Implicit Coercion II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-10"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-10"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-9"><span class="nav-text">详细解析</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#I-How-object-converts-to-different-types"><span class="nav-text">I. How object converts to different types?</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#II-A-Call-Out-one-of-the-answer-maybe-WRONG-here"><span class="nav-text">II. A Call Out: one of the answer maybe WRONG here!</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#III-Explain-parts-of-the-problem"><span class="nav-text">III. Explain parts of the problem</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IV-Final-Output"><span class="nav-text">IV. Final Output</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-arguments"><span class="nav-text">12. arguments</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-11"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-11"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-10"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-Operator-precedence"><span class="nav-text">13. Operator precedence</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-12"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-12"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-11"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-Addition-vs-Unary-Plus"><span class="nav-text">14. Addition vs Unary Plus</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-13"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-13"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-12"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-instanceOf"><span class="nav-text">15. instanceOf</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-14"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-14"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-13"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-parseInt"><span class="nav-text">16. parseInt</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-15"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-15"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-14"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-reduce"><span class="nav-text">17. reduce</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-16"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-16"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-15"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-Promise-executor-II"><span class="nav-text">18. Promise executor II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-17"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-17"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-16"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-this"><span class="nav-text">19. this</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-18"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-18"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-17"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-name-for-Function-expression"><span class="nav-text">20. name for Function expression</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-19"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-19"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-18"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21-Array-I"><span class="nav-text">21. Array I</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-20"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-20"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-19"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-min-max"><span class="nav-text">22. min max</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-21"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-21"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-20"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-Promise-all"><span class="nav-text">23. Promise.all()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-22"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-22"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-21"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-Equality-amp-Sameness"><span class="nav-text">24. Equality &amp; Sameness</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-23"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-23"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-22"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-zero"><span class="nav-text">25. zero</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-24"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-24"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-23"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#26-true-or-false"><span class="nav-text">26. true or false</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-25"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-25"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-24"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#27-Hoisting-I"><span class="nav-text">27. Hoisting I</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-26"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-26"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-25"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#28-Hoisting-II"><span class="nav-text">28. Hoisting II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-27"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-27"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-26"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#29-Hoisting-III"><span class="nav-text">29. Hoisting III</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-28"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-28"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-27"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#30-Equal-II"><span class="nav-text">30. Equal II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-29"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-29"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-28"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#31-Math"><span class="nav-text">31. Math</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-30"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-30"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-29"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#32-Hoisting-IIII"><span class="nav-text">32. Hoisting IIII</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-31"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-31"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-30"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#33-this-II"><span class="nav-text">33. this II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-32"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-32"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-31"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#34-precedence"><span class="nav-text">34. precedence</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-33"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-33"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-32"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#35-Implicit-Coercion-III"><span class="nav-text">35. Implicit Coercion III</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-34"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-34"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-33"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#36-Promise-prototype-finally"><span class="nav-text">36. Promise.prototype.finally()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-35"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-35"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-34"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#37-push-unshift"><span class="nav-text">37. push unshift</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-36"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-36"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-35"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#38-Hoisting-IV"><span class="nav-text">38. Hoisting IV</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-37"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-37"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-36"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#39-var"><span class="nav-text">39. var</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-38"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-38"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-37"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#40-RegExp-prototype-test"><span class="nav-text">40. RegExp.prototype.test</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-39"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-39"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-38"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#41-this-III"><span class="nav-text">41. this III</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-40"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-40"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-39"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#42-Hoisting-V"><span class="nav-text">42. Hoisting V</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-41"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-41"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-40"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#43-JSON-stringify"><span class="nav-text">43. JSON.stringify()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-42"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-42"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-41"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#44-Function-call"><span class="nav-text">44. Function call</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-43"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-43"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-42"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#45-Hoisting-VI"><span class="nav-text">45. Hoisting VI</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-44"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-44"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-43"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#46-Implicit-Coercion-IV"><span class="nav-text">46. Implicit Coercion IV</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-45"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-45"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-44"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#47-Promise-Order-II"><span class="nav-text">47. Promise Order II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-46"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-46"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-45"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#48-Prototype"><span class="nav-text">48. Prototype</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-47"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-47"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-46"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#49-this-IV"><span class="nav-text">49. this IV</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-48"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-48"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-47"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#50-async-await"><span class="nav-text">50. async await</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-49"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-49"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-48"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#51-method"><span class="nav-text">51. method</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-50"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-50"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-49"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#52-requestAnimationFrame"><span class="nav-text">52. requestAnimationFrame</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-51"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-51"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-50"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#53-Prototype-2"><span class="nav-text">53. Prototype 2</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-52"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-52"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-51"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#54-setTimeout-0ms"><span class="nav-text">54. setTimeout(0ms)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-53"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-53"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-52"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#55-sparse-array"><span class="nav-text">55. sparse array</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-54"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-54"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-53"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#56-to-primitive"><span class="nav-text">56. to primitive</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-55"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-55"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-54"><span class="nav-text">详细解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Case-1"><span class="nav-text">Case 1</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Case-2"><span class="nav-text">Case 2</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Case-3"><span class="nav-text">Case 3</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Case-4"><span class="nav-text">Case 4</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Case-5"><span class="nav-text">Case 5</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#57-non-writable"><span class="nav-text">57. non-writable</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-56"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-56"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-55"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#58-inherit-getter-setter"><span class="nav-text">58. inherit getter setter</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-57"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-57"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-56"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#59-override-setter"><span class="nav-text">59. override setter</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-58"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-58"><span class="nav-text">答案</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-57"><span class="nav-text">详细解析</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#60-postMessage"><span class="nav-text">60. postMessage</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-59"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-59"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-58"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#61-onClick"><span class="nav-text">61. onClick</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-60"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-60"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-59"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#62-MessageChannel"><span class="nav-text">62. MessageChannel</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-61"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-61"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-60"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#63-in"><span class="nav-text">63. in</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-62"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-62"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-61"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#64-reference-type"><span class="nav-text">64. reference type</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-63"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-63"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-62"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#65-Function-name"><span class="nav-text">65. Function name</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-64"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-64"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-63"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#66-comma"><span class="nav-text">66. comma</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-65"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-65"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-64"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#67-if"><span class="nav-text">67. if</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-66"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-66"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-65"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#68-if-II"><span class="nav-text">68. if II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-67"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-67"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-66"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#69-undefined"><span class="nav-text">69. undefined</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-68"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-68"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-67"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#70-function"><span class="nav-text">70. function</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-69"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-69"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-68"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#71-two-way-generator"><span class="nav-text">71. two-way generator</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-70"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-70"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-69"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#72-Array-length"><span class="nav-text">72. Array length</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-71"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-71"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-70"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#73-window-name"><span class="nav-text">73. window name</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-72"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-72"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-71"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#74-Typed-Array-length"><span class="nav-text">74. Typed Array length</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-73"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-73"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-72"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#75-meaningless-calculation"><span class="nav-text">75. meaningless calculation</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-74"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-74"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-73"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#76-const"><span class="nav-text">76. const</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-75"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-75"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-74"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#77-parseInt-2"><span class="nav-text">77. parseInt 2</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-76"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-76"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-75"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#78-RegExp"><span class="nav-text">78. RegExp</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-77"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-77"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-76"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#79-Equal-III"><span class="nav-text">79. Equal III</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-78"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-78"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-77"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#80-Proxy-I"><span class="nav-text">80. Proxy I</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-79"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-79"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-78"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#81-setTimeout-II"><span class="nav-text">81. setTimeout II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-80"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-80"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-79"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#82-Proxy-II"><span class="nav-text">82. Proxy II</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-81"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-81"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-80"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#83-Plus-Plus"><span class="nav-text">83. Plus Plus</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-82"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-82"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-81"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#84-Array-prototype-sort"><span class="nav-text">84. Array.prototype.sort()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-83"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-83"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-82"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#85-String-raw"><span class="nav-text">85. String.raw()</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-84"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-84"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-83"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#86-setTimeout-III"><span class="nav-text">86. setTimeout III</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-85"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-85"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-84"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#87-instanceOf-2"><span class="nav-text">87. instanceOf 2</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-86"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-86"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-85"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#88-try%E2%80%A6catch"><span class="nav-text">88. try…catch</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-87"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-87"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-86"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#89-let"><span class="nav-text">89. let</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-88"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-88"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-87"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#90-array-keys"><span class="nav-text">90. array keys</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-89"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-89"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-88"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#91-largest-Array-index"><span class="nav-text">91. largest Array index</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-90"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-90"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-89"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#92-NaN"><span class="nav-text">92. NaN</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-91"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-91"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-90"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#93-string"><span class="nav-text">93. string</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-92"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-92"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-91"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#94-emoji"><span class="nav-text">94. emoji</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-93"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-93"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-92"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#95-number-format"><span class="nav-text">95. number format</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-94"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-94"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-93"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#96-comparison"><span class="nav-text">96. comparison</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-95"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-95"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-94"><span class="nav-text">详细解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#97-this-V"><span class="nav-text">97. this V</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE-96"><span class="nav-text">题目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AD%94%E6%A1%88-96"><span class="nav-text">答案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90-95"><span class="nav-text">详细解析</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hxy"
      src="/images/Robben.gif">
  <p class="site-author-name" itemprop="name">hxy</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">80</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">120</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/huxingyi1997" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;huxingyi1997" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:huxingyi1997@zju.edu.cn" title="E-Mail → mailto:huxingyi1997@zju.edu.cn" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-frog"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hxy</span>
</div>

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共1039.2k字</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'pQsO3ySbU4VtWN2j1FLA74Ha-gzGzoHsz',
      appKey     : 'QYacMDY2VY7Wazprg1X6FiUv',
      placeholder: "Just go go",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

  
  <!-- 动态背景特效 -->
  <!-- 樱花特效 -->
    <script async src="/js/src/sakura.js"></script>
    <script async src="/js/src/fairyDustCursor.js"></script>
</body>
</html>
